Buttons
Buttons allow users to take actions and make choices, with a single click.
Primary Button
Contains actions that are most important or common for the user, including default actions. Primary button is primary visually, not necessarily with position or order relating to secondary button.
1<button class="btn btn-primary">Primary Button</button>
Secondary Button
1<button class="btn btn-secondary">Secondary Button</button>Dark Button
1<button class="btn btn-dark">Dark Button</button>Large Button
1<button class="btn btn-primary btn-lg">Button text</button>Light Button
1<button class="btn btn-light">Light Button</button>Medium Button
1<button class="btn btn-primary btn-md">Button text</button>Small Button
1<button class="btn btn-primary btn-sm">Button text</button>Accessibility
Make it clear what this button does for the user.
-
Make it clear what this button does for the user.
-
Use at most two buttons in one group.
-
Attribute indicating if the element should be.
-
Use more than two words for call to action.
-
First letter of each sentence defaults to a capital letter.
-
Attribute indicating if the element should be.
Classes
Complete list of all CSS classes for the component.
| Name | Class |
|---|---|
| Primary Button | button button-primary |
| Secondary Button | button button-secondary |
| Dark Button | button button-dark |
| Large Button | button button-large |
| Light Button | button button-light |
| Medium Button | button button-medium |
| Small Button | button button-small |