> ## Documentation Index
> Fetch the complete documentation index at: https://memberpulseptyltd.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# 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

<Card>
  <div style={{padding: '24px', display: 'flex', gap: '12px', alignItems: 'center', flexWrap: 'wrap'}}>
    <div style={{backgroundColor: '#2421C4', color: 'white', padding: '10px 20px', borderRadius: '0', fontWeight: '500', cursor: 'pointer'}}>Primary Button</div>
    <div style={{backgroundColor: '#6C69FF', color: 'white', padding: '10px 20px', borderRadius: '0', fontWeight: '500', cursor: 'pointer'}}>Hover State</div>
    <div style={{backgroundColor: '#1A18A0', color: 'white', padding: '10px 20px', borderRadius: '0', fontWeight: '500', cursor: 'pointer'}}>Active State</div>
    <div style={{backgroundColor: '#2421C4', color: 'white', padding: '10px 20px', borderRadius: '0', fontWeight: '500', opacity: 0.5}}>Disabled</div>
  </div>
</Card>

**Use for:** Main actions, form submissions, CTAs

```css theme={null}
.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

<Card>
  <div style={{padding: '24px', display: 'flex', gap: '12px', alignItems: 'center', flexWrap: 'wrap'}}>
    <div style={{backgroundColor: '#ECEBFF', color: '#2421C4', padding: '10px 20px', borderRadius: '0', fontWeight: '500', cursor: 'pointer'}}>Secondary Button</div>
    <div style={{backgroundColor: '#D9D8FF', color: '#2421C4', padding: '10px 20px', borderRadius: '0', fontWeight: '500', cursor: 'pointer'}}>Hover State</div>
    <div style={{backgroundColor: '#ECEBFF', color: '#2421C4', padding: '10px 20px', borderRadius: '0', fontWeight: '500', opacity: 0.5}}>Disabled</div>
  </div>
</Card>

**Use for:** Alternative actions, less prominent CTAs

```css theme={null}
.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

<Card>
  <div style={{padding: '24px', display: 'flex', gap: '12px', alignItems: 'center', flexWrap: 'wrap'}}>
    <div style={{backgroundColor: 'transparent', color: '#2421C4', padding: '10px 20px', borderRadius: '0', fontWeight: '500', border: '1px solid #2421C4', cursor: 'pointer'}}>Outline Button</div>
    <div style={{backgroundColor: '#F0F7FF', color: '#2421C4', padding: '10px 20px', borderRadius: '0', fontWeight: '500', border: '1px solid #2421C4', cursor: 'pointer'}}>Hover State</div>
    <div style={{backgroundColor: 'transparent', color: '#2421C4', padding: '10px 20px', borderRadius: '0', fontWeight: '500', border: '1px solid #2421C4', opacity: 0.5}}>Disabled</div>
  </div>
</Card>

**Use for:** Tertiary actions, cancel buttons, less emphasis

```css theme={null}
.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

<Card>
  <div style={{padding: '24px', display: 'flex', gap: '12px', alignItems: 'center', flexWrap: 'wrap'}}>
    <div style={{backgroundColor: 'transparent', color: '#2421C4', padding: '10px 20px', borderRadius: '0', fontWeight: '500', cursor: 'pointer'}}>Ghost Button</div>
    <div style={{backgroundColor: '#F5F5F7', color: '#2421C4', padding: '10px 20px', borderRadius: '0', fontWeight: '500', cursor: 'pointer'}}>Hover State</div>
  </div>
</Card>

**Use for:** Minimal emphasis, icon buttons, toolbar actions

```css theme={null}
.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

<Card>
  <div style={{padding: '24px', display: 'flex', gap: '12px', alignItems: 'center', flexWrap: 'wrap'}}>
    <div style={{backgroundColor: '#10B981', color: 'white', padding: '10px 20px', borderRadius: '0', fontWeight: '500'}}>Success</div>
    <div style={{backgroundColor: 'transparent', color: '#10B981', padding: '10px 20px', borderRadius: '0', fontWeight: '500', border: '1px solid #10B981'}}>Success Outline</div>
  </div>
</Card>

**Use for:** Confirm actions, save success, positive outcomes

***

### Warning Button

<Card>
  <div style={{padding: '24px', display: 'flex', gap: '12px', alignItems: 'center', flexWrap: 'wrap'}}>
    <div style={{backgroundColor: '#F59E0B', color: 'white', padding: '10px 20px', borderRadius: '0', fontWeight: '500'}}>Warning</div>
    <div style={{backgroundColor: 'transparent', color: '#F59E0B', padding: '10px 20px', borderRadius: '0', fontWeight: '500', border: '1px solid #F59E0B'}}>Warning Outline</div>
  </div>
</Card>

**Use for:** Caution actions, proceed with care

***

### Danger / Destructive Button

<Card>
  <div style={{padding: '24px', display: 'flex', gap: '12px', alignItems: 'center', flexWrap: 'wrap'}}>
    <div style={{backgroundColor: '#DC3545', color: 'white', padding: '10px 20px', borderRadius: '0', fontWeight: '500'}}>Danger</div>
    <div style={{backgroundColor: 'transparent', color: '#DC3545', padding: '10px 20px', borderRadius: '0', fontWeight: '500', border: '1px solid #DC3545'}}>Danger Outline</div>
  </div>
</Card>

**Use for:** Delete actions, destructive operations, critical warnings

<Warning>
  Always use confirmation dialogs before destructive actions. Never use danger buttons for primary CTAs.
</Warning>

***

## Button Sizes

<Card>
  <div style={{padding: '24px', display: 'flex', gap: '12px', alignItems: 'center', flexWrap: 'wrap'}}>
    <div style={{backgroundColor: '#2421C4', color: 'white', padding: '6px 12px', borderRadius: '0', fontWeight: '500', fontSize: '12px'}}>Small</div>
    <div style={{backgroundColor: '#2421C4', color: 'white', padding: '10px 20px', borderRadius: '0', fontWeight: '500', fontSize: '14px'}}>Medium (Default)</div>
    <div style={{backgroundColor: '#2421C4', color: 'white', padding: '14px 28px', borderRadius: '0', fontWeight: '500', fontSize: '16px'}}>Large</div>
  </div>
</Card>

| 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

<Card>
  <div style={{padding: '24px', display: 'flex', gap: '12px', alignItems: 'center', flexWrap: 'wrap'}}>
    <div style={{backgroundColor: '#2421C4', color: 'white', padding: '10px 20px', borderRadius: '0', fontWeight: '500', display: 'flex', alignItems: 'center', gap: '8px'}}>
      <span>+</span> Add Member
    </div>

    <div style={{backgroundColor: '#2421C4', color: 'white', padding: '10px 20px', borderRadius: '0', fontWeight: '500', display: 'flex', alignItems: 'center', gap: '8px'}}>
      Download <span>↓</span>
    </div>

    <div style={{backgroundColor: '#2421C4', color: 'white', padding: '10px 10px', borderRadius: '0', fontWeight: '500', width: '40px', height: '40px', display: 'flex', alignItems: 'center', justifyContent: 'center'}}>
      *
    </div>
  </div>
</Card>

**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

<Card>
  <div style={{padding: '24px', display: 'flex', gap: '0', alignItems: 'center'}}>
    <div style={{backgroundColor: '#2421C4', color: 'white', padding: '10px 20px', borderRadius: '0', fontWeight: '500', borderRight: '1px solid rgba(255,255,255,0.2)'}}>Left</div>
    <div style={{backgroundColor: '#2421C4', color: 'white', padding: '10px 20px', fontWeight: '500', borderRight: '1px solid rgba(255,255,255,0.2)'}}>Center</div>
    <div style={{backgroundColor: '#2421C4', color: 'white', padding: '10px 20px', borderRadius: '0', fontWeight: '500'}}>Right</div>
  </div>
</Card>

**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

<Card>
  <div style={{padding: '24px', display: 'flex', gap: '12px', alignItems: 'center'}}>
    <div style={{backgroundColor: '#2421C4', color: 'white', padding: '10px 20px', borderRadius: '0', fontWeight: '500', display: 'flex', alignItems: 'center', gap: '8px', opacity: 0.7}}>
      <span style={{animation: 'spin 1s linear infinite', display: 'inline-block'}}>↻</span> Loading...
    </div>
  </div>
</Card>

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

***

## Accessibility

<Steps>
  <Step title="Keyboard Navigation" icon="keyboard">
    All buttons must be focusable and activatable with Enter or Space keys.
  </Step>

  <Step title="Focus Visible" icon="eye">
    Focus states must be clearly visible with a ring outline.
  </Step>

  <Step title="Contrast" icon="sun">
    Button text must have minimum 4.5:1 contrast ratio with background.
  </Step>

  <Step title="Touch Target" icon="hand-pointer">
    Minimum touch target size of 44x44px for mobile.
  </Step>
</Steps>

***

## Do's and Don'ts

<CardGroup cols={2}>
  <Card title="Do" icon="check">
    * 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
  </Card>

  <Card title="Don't" icon="x">
    * 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
  </Card>
</CardGroup>