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<div>
2 <button class="button-primary">Primary Button</button>
3 </div>
Secondary Button
The Secondary Button description from Figma goes here
1<div>
2 <button class="button-secondary">Secondary Button</button>
3 </div>Custom Type Button
The Outline Danger Button description from Figma goes here
1<div>
2 <button class="button-custom-type">Warning Button</button>
3 </div>Danger Button
The Danger Button description from Figma goes here
1<div>
2 <button class="button-danger">Danger Button</button>
3 </div>Dark Button
The Dark Button description from Figma goes here
1<div>
2 <button class="button-dark">Dark Button</button>
3 </div>Large Button
1<button class="btn btn-primary btn-lg"></button>Light Button
The Light Button description from Figma goes here
1<div>
2 <button class="button-light">Light Button</button>
3 </div>Medium Button
1<button class="btn btn-primary btn-md"></button>Outline Secondary Button
The Outline Secondary Button description from Figma goes here
1<div>
2 <button class="button-outline-secondary">Outline Button</button>
3 </div>Small Button
1<button class="btn btn-primary btn-sm"></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 |
| Custom Type Button | button button-custom-type |
| Danger Button | button button-danger |
| Dark Button | button button-dark |
| Large Button | button button-large |
| Light Button | button button-light |
| Medium Button | button button-medium |
| Outline Secondary Button | button button-outline-secondary |
| Small Button | button button-small |