Buttons

Buttons trigger actions and guide users through workflows. Consistent button styling helps users understand the importance and impact of actions.

---

Button Variants

Primary Button

Use for: Main actions, form submissions, CTAs

.btn-primary {
  background-color: var(--primary);
  color: white;
  border: none;
  padding: 0.625rem 1.25rem;
  border-radius: 0.5rem;
  font-weight: 500;
}

.btn-primary:hover {
  background-color: var(--primary-light);
}

.btn-primary:active {
  background-color: var(--primary-dark);
}

---

Secondary Button

Use for: Alternative actions, less prominent CTAs

.btn-secondary {
  background-color: var(--secondary);
  color: var(--primary);
  border: none;
  padding: 0.625rem 1.25rem;
  border-radius: 0.5rem;
  font-weight: 500;
}

---

Tertiary / Outline Button

Use for: Tertiary actions, cancel buttons, less emphasis

.btn-outline {
  background-color: transparent;
  color: var(--primary);
  border: 1px solid var(--primary);
  padding: 0.625rem 1.25rem;
  border-radius: 0.5rem;
  font-weight: 500;
}

.btn-outline:hover {
  background-color: var(--primary-light-bg);
}

---

Ghost Button

Use for: Minimal emphasis, icon buttons, toolbar actions

.btn-ghost {
  background-color: transparent;
  color: var(--primary);
  border: none;
  padding: 0.625rem 1.25rem;
  border-radius: 0.5rem;
  font-weight: 500;
}

.btn-ghost:hover {
  background-color: var(--muted);
}

---

Semantic Buttons

Success Button

Use for: Confirm actions, save success, positive outcomes

---

Warning Button

Use for: Caution actions, proceed with care

---

Danger / Destructive Button

Use for: Delete actions, destructive operations, critical warnings

---

Button Sizes

Size	Padding	Font Size	Height	Usage
Small	0.375rem 0.75rem	12px	32px	Compact interfaces, tables
Medium	0.625rem 1.25rem	14px	40px	Default, most use cases
Large	0.875rem 1.75rem	16px	48px	Hero sections, prominent CTAs

---

Button with Icons

Guidelines:

• Icons should be 16-20px depending on button size
• Left icon for actions (Add, Create, Download)
• Right icon for navigation (Next, External link)
• Icon-only buttons need aria-label for accessibility

---

Button Groups

Use for: Related actions, segmented controls, toggle groups

---

Button States

State	Description	Visual Treatment
Default	Normal state	Standard styling
Hover	Mouse over	Lightened background
Focus	Keyboard focus	Ring outline (--ring)
Active	Being clicked	Darkened background
Disabled	Not interactive	50% opacity, cursor: not-allowed
Loading	Processing	Spinner icon, disabled interaction

Loading State

<Button disabled={isLoading}>
  {isLoading && <Loader2 className="animate-spin" />}
  {isLoading ? 'Processing...' : 'Submit'}
</Button>

---

Accessibility

1. Keyboard Navigation

   All buttons must be focusable and activatable with Enter or Space keys.

2. Focus Visible

   Focus states must be clearly visible with a ring outline.

3. Contrast

   Button text must have minimum 4.5:1 contrast ratio with background.

4. Touch Target

   Minimum touch target size of 44x44px for mobile.

---

Do's and Don'ts