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
Blogs
All blogsButton
Designer doc
Button is a utility component to trigger an action.
Example
Variants
Coral’s Button has 3 variants: Contained (default), Outlined, and Text.
View code
Sizing
There are two size using in Coral system which are Medium (default) and Small.
View code
Disabled
View code
Loading
loading button is disabled by default and have a Spinner leftIcon
View code
Note that Coral’s Button is built on BaseButton component, which is using div. This means you can use CSS selector :disabled and :active. Instead, you can use provided [data-coral-disabled] and [data-coral-pressed] to achieve the same result.
Colors
By default, Button is colored based on theme’s primary color. You can specify either color or colorType prop (not both please) to customize it.
View code
For contained button, the text color by default will be the theme background color if the color contrast is > 2 or else will use the text color
View code
Icons
Button also provides leftIcon and rightIcon to help you a bit with the margin.
View code
Radius
By default, radius is based on theme.spacing.radius. You can override radius prop which value is like CSS inline style borderRadius.
View code
Relevant components
API
Button
| Prop name | Type | Default | Description |
|---|---|---|---|
| as | any | Tag or component, but a simple tag (i.e. built-in components, e.g. div, span) is recommended. | |
| colorType | ColorTypes | Set color based on theme. If color is specified, that prop is used instead of this. | |
| disabled | boolean | Equivalent to button's disabled property. | |
| keyboardClickKeys | string[] | ||
| leftIcon | ReactNode | Element before the label. Equivalent to element on the label with some margin. | |
| loading | boolean | ||
| onBlur | FocusEventHandler<HTMLDivElement> | ||
| onClick | MouseEventHandler<HTMLDivElement> | ||
| onKeyDown | KeyboardEventHandler<HTMLDivElement> | ||
| onKeyUp | KeyboardEventHandler<HTMLDivElement> | ||
| onMouseDown | MouseEventHandler<HTMLDivElement> | ||
| onMouseLeave | MouseEventHandler<HTMLDivElement> | ||
| onMouseUp | MouseEventHandler<HTMLDivElement> | ||
| onRelease | EventHandler<SyntheticEvent<HTMLDivElement, Event>> | Callback that's triggered after click i.e. mouseup and keyup of enter or space. | |
| onTouchEnd | TouchEventHandler<HTMLDivElement> | ||
| onTouchStart | TouchEventHandler<HTMLDivElement> | ||
| radius | number | ||
| rightIcon | ReactNode | Element after the label. Equivalent to element on the label with some margin. | |
| size | ButtonSizes | medium | |
| variant | ButtonVariants | contained | Prefers naming it as variant because type is a known button html property. |