Button Design

Buttons are interactive elements that allow users to perform actions. Here’s how you should design buttons in our system.

Variants

• Primary Button: Used for main actions.
• Secondary Button: Used for less prominent actions.
• Disabled Button: Non-clickable buttons.

Code Example

<button class="btn btn-primary">Primary</button>
<button class="btn btn-secondary">Secondary</button>
<button class="btn btn-disabled" disabled>Disabled</button>

Accessibility

• Ensure buttons have a tabindex for keyboard navigation.
• Use aria-label when button content is non-textual (e.g., icons).