Buttons

MemberPulse button styles - primary, secondary, tertiary, warning, danger variants

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

Primary Button

Hover State

Active State

Disabled

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

Secondary Button

Hover State

Disabled

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

Outline Button

Hover State

Disabled

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

Ghost Button

Hover State

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

Success

Success Outline

Use for: Confirm actions, save success, positive outcomes

---

Warning Button

Warning

Warning Outline

Use for: Caution actions, proceed with care

---

Danger / Destructive Button

Danger

Danger Outline

Use for: Delete actions, destructive operations, critical warnings

Always use confirmation dialogs before destructive actions. Never use danger buttons for primary CTAs.

---

Button Sizes

Small

Medium (Default)

Large

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

+ Add Member

Download ↓

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

Left

Center

Right

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

↻ Loading…

<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

Do

• Use clear, action-oriented labels
• Place primary button on the right
• Use one primary button per section
• Disable buttons during loading
• Show loading state for async actions

Don't

• Don’t use vague labels like “Click here”
• Don’t use multiple primary buttons together
• Don’t disable without explanation
• Don’t hide important actions in menus
• Don’t use red for non-destructive actions