Buttons
Buttons are used to initialize an action, such as “Create page,” “Save content,” or “Delete comment.” Buttons should not be used as navigational items unless they link to the next step in a flow.
Positive buttons
Used to call attention to the primary or most important action on a page. Typically, they should only be used once per view (not including a modal dialog).
Neutral buttons
The standard button used for most actions on a page.
Negative buttons
Used when the primary action is destructive (delete, remove, etc.), and most often used in confirmation modals.
Mini buttons
Icon buttons
Icons can be used with any button in order to signal specific actions or external links. Buttons can contain an icon alongside text or without it. Icons in buttons should be used sparingly and only when it increases comprehension.
Button groups
Buttons may be grouped together when their actions are related.
Best practices
Labels
Button labels should be sentence case and as short as possible, while clearly explaining what will occur when the button is clicked. They should begin with a verb that describes the action and reference its object, such as “Save content” or “Delete comment.”
Accessibility
- Buttons should always have an accessible name.
- For buttons that don’t include text, e.g., icon buttons, an accessible name can be provided through an
aria-labeloraria-labelledbyattribute.
- For buttons that don’t include text, e.g., icon buttons, an accessible name can be provided through an
- Whenever possible, use native HTML button controls,
<button>or<input type="button">.- When not using a native button control, the button role must be used instead to make
role="button"to make it appear as one to a screen reader.
- When not using a native button control, the button role must be used instead to make