Buttons
Buttons allow users to take actions and make choices, with a single click.
Primary Button
The Primary Button description from Figma goes here
1<button class="btn btn-primary">Primary Button</button>
Secondary Button
The Secondary Button description from Figma goes here
1<button class="btn btn-secondary">Secondary Button</button>Large Button
1<button class="btn btn-primary btn-lg">Button text</button>Light Button
The Primary Button description from Figma goes here
1<button class="btn btn-light">Primary 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 |
| Large Button | button button-large |
| Light Button | button button-light |
| Medium Button | button button-medium |
| Small Button | button button-small |