Button

When to use it

The Button component can be used on all buttons and, in navigational cases, links (see more below).

Variants

Add e.g. .c-button--small, .c-button--round, .c-button--positive, .c-button--ghost for other variations. Some work together while others don't – use common sense here (don't add both --positive and --negative modifiers on the same button e.g.)

To override the default border radius, set --button-radius to a different value.

For buttons with icons, use a nested <svg> element, first or last in the button, with or without and explicit width/height attribute (if none, a default size will be used).

What it looks like

Code examples

Normal

<button type="button" class="c-button">Normal</button>
<button type="button" class="c-button c-button--small">Small button</button>
<button type="button" class="c-button c-button--disabled" disabled>Disabled button</button>

Primary / Secondary

<input class="c-button c-button--primary" type="submit" value="Save" />
<a href="#button" class="c-button c-button--secondary">Cancel</a>
<button type="button" class="c-button c-button--primary c-button--disabled" disabled>Disabled primary button</button>

Positive / Negative

<button type="button" class="c-button c-button--positive">Add</button>
<button type="button" class="c-button c-button--negative">Remove</button>

Icon

<button class="c-button">
    <svg width="2rem" height="2rem"><use xlink:href="../ui-framework/symbol/svg/sprite.symbol.svg#seat"></use></svg>
    Icon button, image first
</button>
<button class="c-button">
    Icon button, image last
    <svg><use xlink:href="../ui-framework/symbol/svg/sprite.symbol.svg#seat"></use></svg>
</button>

Other

<button type="button" class="c-button c-button--round">Round button</button>
<button type="button" class="c-button c-button--ghost">Ghost button</button>
<button type="button" class="c-button c-button--ghost c-button--primary">Ghost button, primary</button>
<button type="button" class="c-button c-button--ghost c-button--secondary">Ghost button, secondary</button>
<button type="button" class="c-button c-button--ghost c-button--positive">Ghost button, positive</button>
<button type="button" class="c-button c-button--ghost c-button--negative">Ghost button, negative</button>
<button type="button" class="c-button c-button--primary c-button--spinner">
   <span>Spinner button (not loading)</span>
   <div class="c-spinner"><span></span><span></span><span></span><span></span></div>
</button>
<button type="button" class="c-button c-button--primary c-button--spinner is-loading">
   <span>Spinner button (is loading)</span>
   <div class="c-spinner"><span></span><span></span><span></span><span></span></div>
</button>

Grouped

<div class="c-form-control c-form-control--group">
  <button type="button" class="c-button c-button--small">One</button>
  <button type="button" class="c-button c-button--small c-button--selected">Two</button>
  <button type="button" class="c-button c-button--small">Three</button>
</div>

Accessibility notes

Always use the <button> element for clickable actions instead of using <div> or <span> with click event listeners. This ensures that the button is recognized as an interactive element by assistive technologies. Even <a> elements with href="#" should be avoided (but do use links when the href value is valid and the "button" acts as a navigation element that leads to a new location)

Also, ensure that the text within the button clearly describes its action. Avoid using vague labels like "Click here" or "Submit". Instead, use descriptive labels like "Add to Cart" or "Search".

The <button> element is natively focusable and can be activated with the Enter or Space key. Make sure you don't disable this or make the focus indication invisible to the eye.

Sometimes ARIA (Accessible Rich Internet Applications) attributes can be necessary to provide additional context. For example, use aria-pressed="true" or aria-pressed="false" for toggle buttons to indicate their state.