Buttons

This design system includes three styles of buttons, each with four different states.

Button States

Accessibility Considerations

Buttons should only be used in situations where users need to initiate actions, such as submitting forms. Buttons should never be used in place of links nor should other elements (e.g. links) be styled like buttons. By applying button styling only to button elements, we can improve accessibility for keyboard users.

Usage

• Never use buttons in place of links.
• Use buttons to initiate actions.
• Use button classes provided in code example section below.
• Buttons must contain descriptive text.

Code Examples

Primary Button

<button class="btn btn-primary">Descriptive text</button>

Secondary Button

<button class="btn btn-secondary">Descriptive text</button>

Inverse Button

<button class="btn btn-inverse">Descriptive text</button>