This design system utilizes four different states of buttons with two design options for the primary button (dark and light-mode versions).
Buttons
Button States
Normal
Hover
Inactive
Focus
Accessibility Considerations
Button labels should be clear and concise; it should convey an action the user will take. Buttons must have a focused state for keyboard navigation. Colors for the buttons follow WCAG guidelines for color contrast. Buttons and links are used for different purposes, they should not be used in place of each other.
Usage
-
Primarily used on the design system's cards.
-
Color selection is dependent on the surface it will be placed. Generally, dark background = Secondary button, light background = Primary button.
-
Button design is based on the ID of the button. The button state design is defined in the class.
-
Button text conveys an action for the user.
Code Examples
Primary Button
<button type="button" class="btn btn-primary" id="primary-btn">Primary</button>Secondary Button
<button type="button" class="btn btn-secondary" id="secondary-btn">Secondary</button>Hover State
<button type="button" class="btn btn-primary hover" id="primary-btn">Primary</button>Focused State
<button type="button" class="btn btn-primary focus" id="primary-btn">Primary</button>