Button

Example

Code sample

<button type="submit">
  I’m a button!
</button>

Notes

If the button is the only child element of a container element, then at small screen sizes it will change to a full-width button.
Please don't use the disabled attribute on buttons.

Details

Pattern scope:

Atom – The smallest possible pattern, independent

Design source:

Figma

Relevant assets:

Stylesheets:

Variants

Scheme: Primary
The primary call to action on a page, or within a form. This is the default styling for all <button> elements, or elements with the button class attribute.
Example

Open type in a new window

Code sample
```
<button type="submit" data-scheme="primary">
  I’m a button!
</button>
```
Notes

Use the attribute: data-scheme="primary".
Scheme: Secondary
The secondary call to action on a page, or within a form. These elements have a transparent background and a stencilled or stroked outline.
Example

Open type in a new window

Code sample
```
<button type="submit" data-scheme="secondary">
  I’m a button!
</button>
```
Notes

Use the attribute: data-scheme="secondary".

This button style SHOULD only be shown if a Primary button (above) is already present in the form or page.
Scheme: Stripped
Remove the scheme-based theming from a button
Example

Open type in a new window

Code sample
```
<button type="submit" data-scheme="stripped">
  I’m a button!
</button>
```
Mode: Icon before label
Places the designated icon before the button’s label text.
Example

Open type in a new window

Code sample
```
<button type="submit" data-mode="icon-before" data-icon="arrow-right">
  I’m a button!
</button>
```
Notes

Use the attribute: data-mode="icon-before" to trigger this icon mode, and then specify what icon you want by adding data-icon="ICON_NAME". For a full list of icons see: icons.css.

You MUST:
- specify a predefined icon using the data-icon="" attribute.
This button mode can be freely mixed with:
- Primary and Secondary schemes
- Alternate sizes
Mode: Icon after label
Places the designated icon after the button’s label text.
Example

Open type in a new window

Code sample
```
<button type="submit" data-mode="icon-after" data-icon="arrow-right">
  I’m a button!
</button>
```
Notes

Use the attribute: data-mode="icon-after" to trigger this icon mode, and then specify what icon you want by adding data-icon="ICON_NAME". For a full list of icons see: icons.css.

You MUST:
- specify a predefined icon using the data-icon="" attribute.
This button mode can be freely mixed with:
- Primary and Secondary schemes
- Alternate sizes
Mode: Icon only
Replaces the button label with a designated icon.
Example

Open type in a new window

Code sample
```
<button type="submit" data-mode="icon" data-icon="arrow-right">
  I’m a button!
</button>
```
Notes

Use the attribute: data-mode="icon" to trigger this icon-only mode, and then specify what icon you want by adding data-icon="ICON_NAME". For a full list of icons see: icons.css.

You MUST:
- specify a button label as normal. This label will be read out in screen readers.
- specify a predefined icon using the data-icon="" attribute.
This button mode can be freely mixed with:
- Primary and Secondary schemes
- Alternate sizes
Size: Small or Pills
Shrink the button down in size
Example

Open type in a new window

Code sample
```
<button type="submit" data-size="small">
  I’m a button!
</button>
```
Notes

Use the attribute: data-size="small" to reduce this button's visible size.

This button mode can be freely mixed with:
- Primary and Secondary schemes
- Icon modes