Warning
this is a page is in draft and has not yet been edited or approved
Styles
Anatomy
A button consists of the following elements:
- Label - communicate what action will occur when the user interacts with the button.
- Icon left - optional visual hint that communicates what action will occur when user interacts with the button.
- Icon right (a down chevron) - visual hint that typically indicates that interacting with this button will reveal more options
States
Button typically consists of the following states:
- Default - the normal state of a button. A button in this state is active, usable and clickable.
- Hover - this state is applied after the user hovers over the button. Change cursor to cursor:pointer.
- Pressed - this state is applied after the user pressed on the button. Change cursor to cursor:pointer.
- Disabled - this state indicates that the button is temporarily inactive, unusable and unclickable. Change cursor to cursor:not-allowed.
- Focus - this state is applied after the user used keyboard to select this button
- Disabled elements should not be focusable.
- Loading - this state displays a spinner to provide visual feedback that the action is in process. Button interaction is disabled while the inline loading is in progress.
Variants
Each button can be configured as:
- Icon-only button
- Icon and text button
- Text-only button
Button height comes in three sizes: medium, small and extra small:
- Medium - height 40
- Small - height 32
- Extra small - height 24
Button width
- Default width button - by default button width is determined by the label.
- Full width button - button fill 100% of its container width. Label and icon become center-aligned.
- Minimum width - For buttons used in form footer, apply a minimum width of 100.
Tooltip
Display a concise helpful text upon hovering or focusing over a button.
Overflow content
It is best practice to keep button label short and concise. When the label gets too long to fit within the available space for horizontally stacked buttons, consider truncating the label.
Usage
Using the correct button
| Button | When to use |
|---|---|
| Solid - Primary | Use for the primary call to action (CTA) on a page. Primary button should only appear once per major screen or temporary flow. |
| Clear | Use for secondary actions on a page. Secondary buttons are often used to pair with a primary button. Use the variant with left icon for an action bar. |
| Outline | Use for sub-tasks on a page, often a form where primary and secondary actions already exist. |
| Solid - Critical | Use for actions that could cause destructive effect on important data. Often used for the delete action in a confirmation dialog or for the primary CTA in an error notification. |
| Solid - Warning | Often used for the primary CTA in a warning notification. |
| Solid - Success | Often used for the primary CTA in a successful notification. |
| Solid - Tip | Often used for the primary CTA in help or guides. |
| Size - Medium | Base size for most buttons on a page. Use this size to pair with input fields. |
| Size - Small | Use when vertical space is limited or in areas with a confined layout. Use this size in table rows and cards. |
| Size - Extra small | For less prominent actions in a component. Often used for actions such as dismiss, expand/collapse or clear. |
Placement
Left aligned:
- Table toolbar
Right aligned:
- Form footer, wizard, dialog footer, table toolbar, table row actions, page level actions
Button Groups
Button groups allow multiple related actions to be visually grouped together. Use button groups for toolbars, segmented controls, or when presenting several options side by side.
Do's and Dont's
Dont's - Use Solid style to emphasize the primary action. - Use default buttons if there is no primary action; if multiple CTA buttons are needed, use a different color variant.
Dont's - Use more than one solid button in one group. - Use only clear buttons with caution as they may blend in too much with text.