Icon Button
Icon buttons help people take minor actions with one tap
- Icon buttons must use an icon with a clear meaning
- Four types: standard, outlined, danger, and ghost
- On hover, display a tooltip describing the button's action (not the name of the icon)
Example
Resources
| Name | Resource | Status |
|---|---|---|
| Figma | Design Kit (Figma) | Private |
On this page
Usage
Use icon buttons to display actions in a compact layout. Icon buttons can represent opening actions such as opening an overflow menu or search, or represent binary actions that can be toggled on and off, such as favorite or bookmark.
Icon buttons can be grouped together or they can stand alone.
Standard Buttons
Standard icon buttons are used for primary actions on a page.
Outlined Buttons
Outlined icon buttons are used for secondary actions on a page.
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.
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.
Placement
Icon buttons are commonly used in other components, like top app bars and cards. These buttons should be used for common actions. Only display a few icon buttons at once.
On this page
import { IconButton } from '@cerberus/react'Usage
The IconButton API is similar to the Button, but with the addition of an ariaLabel prop.
Customization
You can customize the button by utilizing the cx function.
API
export interface IconButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> { ariaLabel: string palette?: 'action' | 'secondaryAction' | 'danger' size?: 'sm' | 'lg' usage?: 'filled' | 'ghost' | 'outlined'}
define function IconButton(props: IconButtonProps): ReactNodeProps
The IconButton component accepts the following props:
| Name | Default | Description |
|---|---|---|
| ariaLabel | "Icon Button" | The accessible label for the button. |
| palette | action | The color palette of the button. |
| usage | ghost | The style treatment of the button. |
| size | lg | The size of the button. |
On this page
Use Cases
- Users should be able to:
- Understand meaning of the icon
- Navigate to and activate an icon button with assistive technology
- When applicable, a tooltip is available to help describe the icon button's purpose
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 |
Labeling Buttons
The accessibility labels for icon buttons describe the action that the button is executing, such as Favorite, Bookmark, or Send message.
On this page