Button groups

Buttons may be grouped together when their actions are related.


Best practices

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.”


  • 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 or aria-labelledby attribute.
  • 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.