The button
component represents a clickable button.
button--link
component must be used.submit
when submitting a
form. In all other cases the type should be set to button
.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>
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>
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>
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>