# Button — Component Spec Pack (Sample Preview)
> Spec Pack v0.1 · Based on research across 20 design systems · UI Guideline · Feb 2026

⚠️ *This is a sample preview. The full Spec Pack includes complete data from all 20 systems.*

## Naming Convention

**Recommended name: `Button`** (100% adoption — 19 of 19 systems)

| Name | Adoption | Used by |
|------|----------|---------|
| Button | 100% | Acme DS, Horizon UI, Nimbus, Prism, Vertex, ··· and 14 more |

**Guidance:** Use `Button` — every design system analyzed agrees on this name.

---

## Standard Props

These props are derived from patterns across 19 design systems. Adoption % indicates how many systems include each prop.

| Prop | Type | Default | Adoption | Description |
|------|------|---------|----------|-------------|
| `size` | "sm" \| "md" \| "lg" \| "xl" | `md` | 74% | Changes the size of the button, giving it more or less padding. |
| `variant` | "primary" \| "accent" \| "secondary" \| "destructive" | `primary` | 63% | The color of the component. |
| `appearance` | "contained" \| "outlined" \| "ghost" | `contained` | 68% | Determines the importance in the hierarchy. |
| ··· | | | | *8 more props in the full Spec Pack* |

---

## Implementation Checklist

When building this component, ensure:

- [ ] Button prevents interaction when isDisabled is true
- [ ] Loading state shows spinner and prevents interaction
- [ ] Renders as anchor tag when href prop is provided
- ··· *7 more items in the full Spec Pack*

---

## Keyboard Interactions

Based on the WAI-ARIA `button` pattern.

| Key | Action |
|-----|--------|
| `Enter` | Activates the button |
| `Space` | Activates the button |

---

## Accessibility

**Role:** `button`

**Design Requirements:**

- **Visible focus indicator:** 2px ring, offset 2px, meets 3:1 contrast ratio
- **Minimum touch target size:** 44px minimum for touch interfaces
- ··· *2 more requirements + full developer handoff in the Spec Pack*

---

## References

- [Acme DS](https://example.com) · [Horizon UI](https://example.com) · [Nimbus](https://example.com) · ···
- *Full list of 19 design system references in the Spec Pack*

---

*Sample Preview · Spec Pack v0.1 · Full Spec Pack at uiguideline.com/pricing*