Buttons

The basic button component. Used for basic interactions with applications; sometimes used to style links when the resulting action is to navigate to another page.

Standard Buttons

Design
HTML

CSS Classes:

1. .button

  • The default button component.

2. .button--primary

  • The modifier to style the primary button on a page.
  • Only one primary button should exist per form/interaction.

Icon Buttons

Design
HTML

CSS Classes:

1. .button--icon

  • Modifier for icon buttons. Reduced padding to suit icon size.
  • Must contain icon element, and as per best practice, a span.is-srOnly element which contains a readable label for the button.

Marketing Button

Design
HTML

CSS Classes:

1. .button--marketing

  • This type of button can only be used in a marketing element (Banner / page) as a primary action.
  • There can only be 1 of this type of button in the context of the pattern it has been used in. It can be duplicated in a marketing landing page but the action has to be the same.

Warning Button

View Demo
Design

Rules:

The warning button is used as a revert action and is required to be followed up with a prompt to confirm that the user is okay with taking this action (i.e. Remove, Delete, or Disconnect).

There can only be one warning button present if it is used in the action bar or if it is in a group of buttons.

If there is a delete/remove action it should always be red to be consistent all over the control panel (example even in the dropdown, the delete action text is red)

 HTML

Rules:

1. .button--warning

  • This button action has to be followed by a prompt (confirmation of the action that will be taken).

Accessibility

Take into consideration the role your button will play in the interaction of your application when deciding which semantic element to use.

  • If you expect to be able to open a new tab when middle-clicking the button, or the result you generate is able to be accessed/shared via a link, then you may use an anchor tag with the button class applied.
  • For most other cases, you should use a button tag when creating a button.
  • Don't forget to set the button's [type] attribute to define what it does in the context of your application.
Icon Buttons

When creating an icon button, you must add a label for your icon so that it can be readable by screenreaders. This should be in the form of a span.is-srOnly as a sibling of the icon.

Keyboard interactions:

A button should be keyboard accessible via the Tab or Arrow keys, and actionable via the Enter or Space key. If you're using an anchor tag as a button, you lose keyborard indexing if your [href] attribute is missing or empty.