Buttons

This design system includes two styles of buttons, each with two 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-outline-primary">Descriptive text</button>

Text Button

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