figma
storybook
react
i18nButton
Buttons are clickable items used for actions. They can have different styles depending on the needs.
Zoning
Style
Sizes
Coral supports two button sizes: M and S.
The small size can only display icons from SizedIcon's "S" batch.
Variations
Primary
| Name | Description | Default | Control |
|---|---|---|---|
| children | - | ||
| onClick | A callback function | - | - |
| icon | optional. In regular size, it supports both Icon (legacy) and SizedIcon<"M"> names. In small size, it only supports SizedIcon<"S"> names. | - | |
| isLoading | optional | - | |
| size | optional (default is "M") | - | |
| isDropdown | optional - | - | |
| disabled | optional - | - | |
| focusable | optional - | - | |
| type | optional (default is "button") - | - |
Destructive
| Name | Description | Default | Control |
|---|---|---|---|
| children | - | ||
| onClick | A callback function | - | - |
| icon | optional. In regular size, it supports both Icon (legacy) and SizedIcon<"M"> names. In small size, it only supports SizedIcon<"S"> names. | - | |
| isLoading | optional | - | |
| size | optional (default is "M") | - | |
| isDropdown | optional - | - | |
| disabled | optional - | - | |
| focusable | optional - | - | |
| type | optional (default is "button") - | - |
Secondary
| Name | Description | Default | Control |
|---|---|---|---|
| children | - | ||
| onClick | A callback function | - | - |
| icon | optional. In regular size, it supports both Icon (legacy) and SizedIcon<"M"> names. In small size, it only supports SizedIcon<"S"> names. | - | |
| isLoading | optional | - | |
| size | optional (default is "M") | - | |
| isDropdown | optional - | - | |
| disabled | optional - | - | |
| focusable | optional - | - | |
| type | optional (default is "button") - | - |
Tertiary
| Name | Description | Default | Control |
|---|---|---|---|
| children | - | ||
| onClick | A callback function | - | - |
| icon | optional. In regular size, it supports both Icon (legacy) and SizedIcon<"M"> names. In small size, it only supports SizedIcon<"S"> names. | - | |
| isLoading | optional | - | |
| size | optional (default is "M") | - | |
| isDropdown | optional - | - | |
| disabled | optional - | - | |
| focusable | optional - | - | |
| type | optional (default is "button") - | - |
Interactions
All buttons have interactive states for "hover", "active" and "disabled". A focus ring should also be displayed on keyboard navigation.
Button skeletons
Use SkeletonButton or Skeleton variant="button" to represent a placeholder for a button.
The Skeleton Documentation is over there!
Button tooltips
Buttons can have a tooltip on hover displaying additional description.
Async buttons
When the user clicks on the button, and the action is asynchronous, a spinner will appear on the left of the label. If the button has an icon, the spinner will temporarily replace this icon as long as it's loading. No action will be possible until it's done.
Usage
As you've seen, each variant has its own component. But you may want to switch from a variant to another using props.
You can, using the <Button> generic component.
Each variant has the same usage rules as their standalone component counterparts seen above.
Content
The word(s) on buttons should be accurate, specific, and explicit—not vague. A good button label invites users to take action. Best to use verbs and label the button with what it actually does. Use OK sparingly—replace it with the specific action whenever possible. Users usually click OK to confirm the action they want to do. Name that action instead.
- Use sentence case in button labels.
Always start with an action verb: something happens when you click a button. Say what happens with a verb. Navigation buttons are an example of an exception to using an action verb. These often use -Next- and -Back-.
Choose specific words over vague words: “Try it now” for example is a common call to action (CTA), but it doesn't really tell the user what will happen next. It might be too vague. Use your judgment according to what the user should be doing when they click the button.
Choose words that logically align with the preceding content: if your headline says "Sign up for a free trial" then your button text should also say "Sign up".
- Don’t use more than 3 words on a button: keep it short and simple.
Don't use Yes and No for buttons. Say what action really happens when the user clicks.
- Don't use title case or all caps in button labels (except for acronyms).
Accessibility
-
Press Tab to focus on the button
-
Press Spacebar or Enter to activate the button