# Button

Primary actionable element. Six variants and four sizes. Use `asChild` to keep button styling on a router-aware link.

[View examples](https://marsam.rahhal.app/components/button) · [Agent index](https://marsam.rahhal.app/llms.txt)

**Import:** `@rahhal/ui/button`

**Category:** `actions`

## Variants

| variant | purpose |
| --- | --- |
| default | primary CTA |
| destructive | irreversible / dangerous |
| outline | secondary action with border |
| secondary | muted secondary surface |
| ghost | low-emphasis (toolbar, icon button) |
| link | inline link styled as a button |

## Sizes

Fully-rounded capsules. Default height meets Apple's 44pt touch target.

| size | height |
| --- | --- |
| sm | 2.25rem / 36px |
| default | 2.75rem / 44px |
| lg | 3rem / 48px |
| icon | 2.75rem square |

## Patterns

- Pass `asChild` to render a router-aware `<Link>` with button styling.
- Place icons via children; use `size="icon"` for icon-only buttons (always set `aria-label`).
- Default and destructive variants get a soft tinted shadow that lifts on hover — matches Apple Prominent buttons.