Button

The button system provides a flexible and consistent way to create interactive elements across your application. It offers three main button types (Primary, Secondary, and Tertiary) with three emphasis levels (High, Medium, and Low) for each type. This system allows for a wide range of visual hierarchies and use cases.

All buttons can be styled using the documented variables, with any provided values over-riding the provided defaults.

Button Implementation

Buttons use the btn class, along with your chosen skin, e.g. skin-primary-emphasised

Don’t forget to also include the interactive class so that the button receives the skins hover, active, focus and disabled

<button class="skin-primary-emphasised interactive btn">Default</button>

<button class="skin-primary-emphasised interactive btn">
  <div class="icon-container">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
      <path
        d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"
      />
    </svg>
  </div>
  <span>Icon L</span>
</button>

<button class="skin-primary-emphasised interactive btn">
  <span>Icon R</span>
  <div class="icon-container">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
      <path
        d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"
      />
    </svg>
  </div>
</button>

<button
  class="skin-primary-emphasised interactive btn icon-only"
  aria-label="Save to wishlist"
>
  <div class="icon-container">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
      <path
        d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"
      />
    </svg>
  </div>
</button>

<button class="skin-primary-emphasised interactive btn" disabled>
  <span>Disabled</span>
</button>

<button
  class="skin-primary-emphasised interactive btn icon-only"
  aria-label="Save to wishlist"
  disabled
>
  <div class="icon-container">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
      <path
        d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"
      />
    </svg>
  </div>
</button>
<button class="skin-primary-emphasised interactive btn">Default</button>

<button class="skin-primary-emphasised interactive btn">
  <div class="icon-container">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
      <path
        d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"
      />
    </svg>
  </div>
  <span>Icon L</span>
</button>

<button class="skin-primary-emphasised interactive btn">
  <span>Icon R</span>
  <div class="icon-container">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
      <path
        d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"
      />
    </svg>
  </div>
</button>

<button
  class="skin-primary-emphasised interactive btn icon-only"
  aria-label="Save to wishlist"
>
  <div class="icon-container">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
      <path
        d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"
      />
    </svg>
  </div>
</button>

<button class="skin-primary-emphasised interactive btn" disabled>
  <span>Disabled</span>
</button>

<button
  class="skin-primary-emphasised interactive btn icon-only"
  aria-label="Save to wishlist"
  disabled
>
  <div class="icon-container">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
      <path
        d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"
      />
    </svg>
  </div>
</button>

Icon Support

Buttons can include icons on the left or right side of the text, or as standalone icon buttons. Use the icon-container class to wrap your SVG icons.

Disabled State

Add the disabled attribute to a button to indicate that it’s not interactive.

Bordered Buttons

We may want to have our borders have a low, or no border by default, but also have consistent widths on our buttons with emphasised borders. For this reason, the bordered class can be used to specify the button should have an emphasised border. The height is adjusted, ensuring that both bordered and non bordered buttons are a consistent width.

<button
  class="skin-control interactive btn icon-only btn-bordered"
  aria-label="Play"
>
  <svg
    xmlns="http://www.w3.org/2000/svg"
    width="24"
    height="24"
    fill="currentColor"
    viewBox="0 0 24 24"
  >
    <path
      fill-rule="evenodd"
      d="M10.271 5.575C8.967 4.501 7 5.43 7 7.12v9.762c0 1.69 1.967 2.618 3.271 1.544l5.927-4.881a2 2 0 0 0 0-3.088l-5.927-4.88Z"
      clip-rule="evenodd"
    />
  </svg>
</button>
<button
  class="skin-control interactive btn icon-only btn-bordered"
  aria-label="Play"
>
  <svg
    xmlns="http://www.w3.org/2000/svg"
    width="24"
    height="24"
    fill="currentColor"
    viewBox="0 0 24 24"
  >
    <path
      fill-rule="evenodd"
      d="M10.271 5.575C8.967 4.501 7 5.43 7 7.12v9.762c0 1.69 1.967 2.618 3.271 1.544l5.927-4.881a2 2 0 0 0 0-3.088l-5.927-4.88Z"
      clip-rule="evenodd"
    />
  </svg>
</button>

Button Bars

Placing buttons together as a bar can be made easy using the btn-bar class applied to a parent div. Vertical button bars can also be created, using the btn-bar-vertical class.

<div class="skin-control btn-bar">
  <button
    class="skin-control interactive btn icon-only btn-bordered"
    aria-label="Play"
  >
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="currentColor"
    >
      <path
        d="M15.6099 18L17 16.6371L12.7802 12.5L17 8.36289L15.6099 7L10 12.5L15.6099 18Z"
      />
      <path d="M9 7H7V18H9V7Z" />
    </svg>
  </button>
  <button
    class="skin-control interactive btn icon-only btn-bordered"
    aria-label="Play"
  >
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="currentColor"
    >
      <path
        d="M15 16.1371L13.6099 17.5L8 12L13.6099 6.5L15 7.86289L10.7802 12L15 16.1371Z"
      />
    </svg>
  </button>
  <button
    class="skin-control interactive btn icon-only btn-bordered"
    aria-label="Play"
  >
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      fill="currentColor"
      viewBox="0 0 24 24"
    >
      <path
        fill-rule="evenodd"
        d="M10.271 5.575C8.967 4.501 7 5.43 7 7.12v9.762c0 1.69 1.967 2.618 3.271 1.544l5.927-4.881a2 2 0 0 0 0-3.088l-5.927-4.88Z"
        clip-rule="evenodd"
      />
    </svg>
  </button>
  <button
    class="skin-control interactive btn icon-only btn-bordered"
    aria-label="Play"
  >
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="currentColor"
    >
      <path
        d="M9 16.1371L13.2198 12L9 7.86289L10.3901 6.5L16 12L10.3901 17.5L9 16.1371Z"
      />
    </svg>
  </button>
  <button
    class="skin-control interactive btn icon-only btn-bordered"
    aria-label="Play"
  >
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="currentColor"
    >
      <path
        d="M8.39012 18L7 16.6371L11.2198 12.5L7 8.36289L8.39012 7L14 12.5L8.39012 18Z"
      />
      <path d="M15 7H17V18H15V7Z" />
    </svg>
  </button>
</div>
<div class="skin-control btn-bar">
  <button
    class="skin-control interactive btn icon-only btn-bordered"
    aria-label="Play"
  >
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="currentColor"
    >
      <path
        d="M15.6099 18L17 16.6371L12.7802 12.5L17 8.36289L15.6099 7L10 12.5L15.6099 18Z"
      />
      <path d="M9 7H7V18H9V7Z" />
    </svg>
  </button>
  <button
    class="skin-control interactive btn icon-only btn-bordered"
    aria-label="Play"
  >
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="currentColor"
    >
      <path
        d="M15 16.1371L13.6099 17.5L8 12L13.6099 6.5L15 7.86289L10.7802 12L15 16.1371Z"
      />
    </svg>
  </button>
  <button
    class="skin-control interactive btn icon-only btn-bordered"
    aria-label="Play"
  >
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      fill="currentColor"
      viewBox="0 0 24 24"
    >
      <path
        fill-rule="evenodd"
        d="M10.271 5.575C8.967 4.501 7 5.43 7 7.12v9.762c0 1.69 1.967 2.618 3.271 1.544l5.927-4.881a2 2 0 0 0 0-3.088l-5.927-4.88Z"
        clip-rule="evenodd"
      />
    </svg>
  </button>
  <button
    class="skin-control interactive btn icon-only btn-bordered"
    aria-label="Play"
  >
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="currentColor"
    >
      <path
        d="M9 16.1371L13.2198 12L9 7.86289L10.3901 6.5L16 12L10.3901 17.5L9 16.1371Z"
      />
    </svg>
  </button>
  <button
    class="skin-control interactive btn icon-only btn-bordered"
    aria-label="Play"
  >
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="currentColor"
    >
      <path
        d="M8.39012 18L7 16.6371L11.2198 12.5L7 8.36289L8.39012 7L14 12.5L8.39012 18Z"
      />
      <path d="M15 7H17V18H15V7Z" />
    </svg>
  </button>
</div>

<div class="skin-control btn-bar-vertical">
  <button
    class="skin-control interactive btn icon-only btn-bordered"
    aria-label="Play"
  >
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="currentColor"
    >
      <path
        d="M15.6099 18L17 16.6371L12.7802 12.5L17 8.36289L15.6099 7L10 12.5L15.6099 18Z"
      />
      <path d="M9 7H7V18H9V7Z" />
    </svg>
  </button>
  <button
    class="skin-control interactive btn icon-only btn-bordered"
    aria-label="Play"
  >
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="currentColor"
    >
      <path
        d="M15 16.1371L13.6099 17.5L8 12L13.6099 6.5L15 7.86289L10.7802 12L15 16.1371Z"
      />
    </svg>
  </button>
  <button
    class="skin-control interactive btn icon-only btn-bordered"
    aria-label="Play"
  >
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      fill="currentColor"
      viewBox="0 0 24 24"
    >
      <path
        fill-rule="evenodd"
        d="M10.271 5.575C8.967 4.501 7 5.43 7 7.12v9.762c0 1.69 1.967 2.618 3.271 1.544l5.927-4.881a2 2 0 0 0 0-3.088l-5.927-4.88Z"
        clip-rule="evenodd"
      />
    </svg>
  </button>
  <button
    class="skin-control interactive btn icon-only btn-bordered"
    aria-label="Play"
  >
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="currentColor"
    >
      <path
        d="M9 16.1371L13.2198 12L9 7.86289L10.3901 6.5L16 12L10.3901 17.5L9 16.1371Z"
      />
    </svg>
  </button>
  <button
    class="skin-control interactive btn icon-only btn-bordered"
    aria-label="Play"
  >
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="currentColor"
    >
      <path
        d="M8.39012 18L7 16.6371L11.2198 12.5L7 8.36289L8.39012 7L14 12.5L8.39012 18Z"
      />
      <path d="M15 7H17V18H15V7Z" />
    </svg>
  </button>
</div>
<div class="skin-control btn-bar-vertical">
  <button
    class="skin-control interactive btn icon-only btn-bordered"
    aria-label="Play"
  >
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="currentColor"
    >
      <path
        d="M15.6099 18L17 16.6371L12.7802 12.5L17 8.36289L15.6099 7L10 12.5L15.6099 18Z"
      />
      <path d="M9 7H7V18H9V7Z" />
    </svg>
  </button>
  <button
    class="skin-control interactive btn icon-only btn-bordered"
    aria-label="Play"
  >
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="currentColor"
    >
      <path
        d="M15 16.1371L13.6099 17.5L8 12L13.6099 6.5L15 7.86289L10.7802 12L15 16.1371Z"
      />
    </svg>
  </button>
  <button
    class="skin-control interactive btn icon-only btn-bordered"
    aria-label="Play"
  >
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      fill="currentColor"
      viewBox="0 0 24 24"
    >
      <path
        fill-rule="evenodd"
        d="M10.271 5.575C8.967 4.501 7 5.43 7 7.12v9.762c0 1.69 1.967 2.618 3.271 1.544l5.927-4.881a2 2 0 0 0 0-3.088l-5.927-4.88Z"
        clip-rule="evenodd"
      />
    </svg>
  </button>
  <button
    class="skin-control interactive btn icon-only btn-bordered"
    aria-label="Play"
  >
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="currentColor"
    >
      <path
        d="M9 16.1371L13.2198 12L9 7.86289L10.3901 6.5L16 12L10.3901 17.5L9 16.1371Z"
      />
    </svg>
  </button>
  <button
    class="skin-control interactive btn icon-only btn-bordered"
    aria-label="Play"
  >
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="currentColor"
    >
      <path
        d="M8.39012 18L7 16.6371L11.2198 12.5L7 8.36289L8.39012 7L14 12.5L8.39012 18Z"
      />
      <path d="M15 7H17V18H15V7Z" />
    </svg>
  </button>
</div>

CSS Variables

General Button Variables

Variable	Default Value	Description
`--btn-radius`	`var(--radius-site)`	Border radius of the button
`--btn-animation-speed`	`var(--animation-speed-quick)`	Speed of button animations
`--btn-hover-scale`	`1.005`	Scale factor on hover
`--btn-active-scale`	`0.995`	Scale factor when active
`--btn-gap`	`0.5rem`	Gap between button elements
`--btn-icon-scale-hover`	`1.15`	Icon scale factor on hover
`--btn-icon-scale-active`	`1.3`	Icon scale factor when active
`--btn-icon-stroke-width`	`3`	Stroke width of icon SVGs
`--btn-padding-x`	`1rem`	Horizontal padding
`--btn-padding-y`	`0.5rem`	Vertical padding
`--btn-border-width`	`0px`	Default border width
`--btn-bordered-border-width`	`3px`	Border width for bordered buttons
`--btn-line-height`	`var(--line-height-body)`	Line height of button text
`--btn-height`	`calc(var(--line-height) + 2 * var(--btn-padding-y))`	Total button height
`--btn-text-size`	`var(--text-body)`	Font size of button text
`--btn-icon-size`	`calc(var(--btn-height) - (2 * var(--btn-padding-y)))`	Size of button icons

Accessibility

The button system is designed with accessibility in mind:

Use of semantic <button> elements for all buttons.
Provides descriptive text for screen readers.
Supports keyboard navigation and focus states.

For further guidance on documentation, refer to the WAI-ARIA Button Pattern.

Keyboard Interaction

Buttons are focusable and can be activated using the Space or Enter keys.
Tab key navigates between buttons.
Disabled buttons do not receive focus or be clickable.

Best Practices

Use button types consistently across your application.
Choose the appropriate emphasis level based on the action’s importance.
Use clear, action-oriented text for button labels.
Avoid using too many high emphasis buttons on a single page.
Consider the visual hierarchy when placing buttons near each other.

Implementation Notes

When implementing buttons in your project:

Ensure that button text is clear and descriptive.
Use icons judiciously to enhance understanding, not replace text.
Make sure that aria labels on icon only buttons clearly explain the function of the button, and don’t just state what the icon is.
Test buttons across different screen sizes to ensure proper scaling and touch targets.
Implement proper focus management, especially when buttons trigger modals or other interactive elements.
Ensure that aria labels for icon only buttons are correct