Simplex

Components

Button

The button component represents a clickable button.

Overall usage

  • Used to trigger form submission or events (such as open/close, fired modals etc).
  • Must not be used when the purpose is to send the user to a new URL. In these cases, the button--link component must be used.
  • The type must be set to submit when submitting a form. In all other cases the type should be set to button.

Accessibility

  • The content of the button should be meaningful. The purpose of the button can be determined from the button text alone.
  • The static, focus, hover and active states of the button should be defined
  • There must be a clearly visible focus state, and the focus method should be consistent across all focusable elements.

.button--primary

Used for the main action on a page.

<button type="button" class="button--primary">button--primary</button>
<button type="button" class="button--primary" disabled>button--primary</button>

.button--secondary

Used for supporting actions on a page.

<button type="button" class="button--secondary">button--secondary</button>
<button type="button" class="button--secondary" disabled>button--secondary</button>

.button--link

Used for buttons that need to appear like a link

<button type="button" class="button--link">button--link</button>
<button type="button" class="button--link" disabled>button--link</button>

.button-small

Used for buttons that contain icons only. Must be used in conjunction with one of three different button variatons, primary, secondary or link. As there is no supporting text for these icons, hidden text must be provided for screen readers

<button type="button" class="button--primary button-small">
  <span class="fas fa-times" aria-hidden="true">
    <span class="u-hidden">Close</span>
  </span>
</button>
<button type="button" class="button--secondary button-small">
  <span class="fas fa-plus" aria-hidden="true">
    <span class="u-hidden">Open</span>
  </span>
</button>
<button type="button" class="button--link button-small">
  <span class="fas fa-chevron-right" aria-hidden="true">
    <span class="u-hidden">Right</span>
  </span>
</button>