Button groups
Buttons may be grouped together when their actions are related.
buttons--group
Answer
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-label
oraria-labelledby
attribute.
- 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
Was this helpful?