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

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.