Button
Common buttons prompt most actions in a UI
- Can contain an optional leading icon
- Four types: sharp, rounded, outlined, and ghost
- Keep labels concise and in sentence-case
- Containers are either sharp or rounded and wide enough to fit label text
Example
Resources
| Name | Resource | Status |
|---|---|---|
| Figma | Design Kit (Figma) | Private |
On this page
Usage
- Used in places like:
- Dialogs
- Modal Windows
- Forms
- Cards
Filled Buttons
Filled buttons have the most visual impact after the FAB, and should be used for important, final actions that complete a flow, like Save, Join now, or Confirm.
Danger Buttons
Danger buttons are used for actions that are destructive, like deleting an item or canceling a process. They should be used sparingly, and only when the action is irreversible.
Outline Buttons
Outline buttons are used for secondary actions on a page, like Cancel or Close. They should be used for actions that are less important than the primary action on the page.
Ghost Buttons
Ghost buttons are used for tertiary actions on a page, like Help or Learn more. They should be used for actions that are less important than the secondary action on the page.
Rounded Buttons
Rounded buttons are used for actions that are used as an alternate themed Default.
Responsive Layouts
When scaling layouts for large screen devices, buttons can adapt their visual presentation, alignment, and arrangement to fit different contexts and user needs.
On this page
import { Button, ButtonParts } from '@cerberus/react'Usage
You can mix and match all of the examples to create the button style of your choosing.
With Icon
You can utilize the ButtonParts API to use an icon within the button. This will allow you to dynamically show a Spinner when the button has a pending state.
You can customize the button by utilizing the cx function.
API
export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> { palette?: 'action' | 'secondaryAction' | 'danger' usage?: 'filled' | 'outlined' | 'ghost' shape?: 'sharp' | 'rounded' pending?: boolean}
define function Button(props: ButtonProps): ReactNodeProps
The Button component accepts the following props:
| Name | Default | Description |
|---|---|---|
| palette | action | The color palette of the button. |
| usage | filled | The style treatment of the button. |
| shape | sharp | The shape of the button. |
| pending | false | The loading state of the button. When a button has an Icon it will replace it with a spinner. When not, is shows a disabled state. |
ButtonParts
The ButtonParts API is the family of components.
| Name | Description |
|---|---|
| Root | The Button component which is the Provider for the family. |
| Icon | The ButtonIcon component which dynamically replaces an icon with a Spinner when the state is pending. |
On this page
Use Cases
- Users should be able to:
- Use a button to perform an action
- Navigate to and activate a button with assistive tech (i.e., focus)
Interaction & Style
Similarly styled components shouldn't be used together if they don't each pass the 3:1 contrast ratio. Higher contrast helps differentiate between a group of similar components.
Keyboard Navigation
| Keys | Actions |
|---|---|
| Tab | Focus lands on (non-disabled) button |
| Space / Enter | Activates the (non-disabled) button |
On this page