Buttons
Buttons are often used to trigger actions, responses, or events. Use them to initiate specific actions or commands, such as searching the website, visiting forms, and navigating the website.
Regular Buttons
Regular buttons are used to guide user interactions: primary buttons are for key actions such as submitting forms, secondary buttons for complementary actions such as going back a page, and tertiary buttons for less crucial or canceling actions.
<div class="btn">Primary - Default</div> <div class="btn btn-secondary">Secondary</div> <div class="btn btn-tertiary">Tertiary</div>
Primary Buttons:
- Use in the case of an explicit call to action
- Use for the main, most important action on a page (e.g., “Submit,” “Save”)
Secondary Buttons:
- Provide alternative actions that are relevant but less crucial (e.g., “Cancel,” “Back”)
- Pair this button with the primary version when needed.
Tertiary Buttons:
- Use in the case of less crucial actions.
- Use as a standalone. Don’t pair with primary or secondary buttons.
Button Sizes
Button sizes in user interfaces are varied to prioritize interactions; larger buttons for primary actions, smaller for secondary, maintaining visual hierarchy and ease of use. Larger buttons under paragraphs use full width buttons within call to actions or containers.
<div class="btn">Default</div> <div class="btn btn-lg">Large</div> <div class="btn btn-fullw">Full Width</div>
Button with Icons
Buttons with icons are effective for conveying actions efficiently in user interfaces, aiding quick comprehension and reducing reliance on text, resulting in a more intuitive and visually appealing user experience.
Add an icon by adding btn-icon class, and placing the i icon before the text.
<div class="btn btn-icon"> <i class="bi bi-bookmark-star-fill"></i>Default </div> <div class="btn btn-icon btn-secondary"> <i class="bi bi-bookmark-star-fill"></i>Secondary </div> <div class="btn btn-icon btn-tertiary"> <i class="bi bi-bookmark-star-fill"></i>Tertiary </div>