Content

Button

Buttons are using the native <button> tag, without .classes. for the default style.

<button>Button</button>

Variants#

Buttons come with .secondary and .contrast styles (not available in the class-less version).

<button class="secondary">Secondary</button>
<button class="contrast">Contrast</button>

They also come with a classic outline style (not available in the class-less version).

<button class="outline">Primary</button>
<button class="outline secondary">Secondary</button>
<button class="outline contrast">Contrast</button>

Form buttons#

type="submit" and type="button" inputs are also displayed as buttons. All form buttons are width: 100%; by default, to match with the other form elements.

<input type="submit" />
<input type="button" value="Input" />

Reset inputs have the secondary style by default.

<input type="reset" />

Disabled#

Buttons come with a disabled style.

<button disabled>Disabled</button>
<button class="secondary" disabled>Disabled</button>
<button class="contrast" disabled>Disabled</button>

Role button#

Clickable elements with role="button" are rendered as buttons.

Div as button

<div role="button" tabindex="0">Div as a button</div>

Usage with group#

You can use role="group" with buttons. See Group.

<div role="group">
  <button>Button</button>
  <button>Button</button>
  <button>Button</button>
</div>

Edit this page on GitHub