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="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
2 Primary Button
3 </button>Secondary Button
The Secondary Button description from Figma goes here
1<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
2 Secondary Button
3 </button>Custom Type Button
The Outline Danger Button description from Figma goes here
1<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
2 Warning Button
3 </button>Danger Button
The Danger Button description from Figma goes here
1<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
2 Danger Button
3 </button>Dark Button
The Dark Button description from Figma goes here
1<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
2 Dark Button
3 </button>Light Button
The Light Button description from Figma goes here
1<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
2 Light Button
3 </button>Outline Secondary Button
The Outline Secondary Button description from Figma goes here
1<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
2 Outline Button
3 </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 | btn btn-primary |
| Secondary Button | btn btn-secondary |
| Custom Type Button | btn btn-custom-type |
| Danger Button | btn btn-danger |
| Dark Button | btn btn-dark |
| Light Button | btn btn-light |
| Outline Secondary Button | btn btn-outline-secondary |
| Small Button | btn btn-small |
| Medium Button | btn btn-medium |
| Large Button | btn btn-large |