Coral is a thoroughly developed design system widely adopted by developers and designers for creating beautiful and user-friendly Sea internal products.
Copyright © 2018-2025 Sea Labs
Migration to V2
There is a few breaking changes for Coral2 updates, here is the things to note for migration:
Theme changes
- ColorTypes name updates, fail to update this might cause crashed or black color
Secondary => Error; Alternate => Text; plain => background; removed: fade, fadeAlternate new: text, textSecondary, backgroundSecondary,…
-
Color palette is updated, example: palette.blue => palette.blue[5]
-
Disabled status previously is style with opacity 0.3, now is updated to use color textDisabled and backgroundColor backgroundSecondary
-
ToastTypes Fail => Error
Icon changes
V1 icon remain available at @seaweb/coral/components/icons, however, is advised to upgrade to new V2 icon at @seaweb/coral/icons for new design
Other updates
- MultiSelect selected icon changed to checkbox
- Field with LabelPositions.Top font-size updated from 14px to 12px
- Chip design updated
- InputGroup default gap value changed from 0 to -1
- Button variant Text added transparent border
- Dialog and Drawer will have shadow when content is scrollable
- UploadFile design update
- TextField and TextArea border changed to TextFieldWrapper box-shadow, style on TextField and TextArea might need to change to wrapperProps
Exciting New Features
- New LinkButton component to replace Button as Link
- New Empty placeholder component
- New orientation prop for RadioGroup