# Button

One family for every action, with a label, optional icons and a shortcut key.

Tier: Free

## Installation

```bash
npx shadcn add @fetaui/button
```

## Usage

```tsx
import { Button } from '@/components/fetaui/button'

export function SaveBar() {
  return <Button variant="primary">Save changes</Button>
}
```

## API

| Prop | Type | Default |
|---|---|---|
| variant | primary, secondary, outline, ghost, destructive, link | primary |
| size | sm, md, lg | md |
| shape | soft, pill | soft |
| status | idle, loading, success | idle |
| loadingLabel | ReactNode | children |
| successLabel | ReactNode | children |
| onSuccessEnd | () => void |  |
| feedback | { loading?, success, loadingMs? } |  |
| leadingIcon | ReactNode |  |
| trailingIcon | ReactNode |  |
| shortcut | string |  |
| disabled | boolean | false |
| animated | boolean | true |

## When to use

- Primary for the one main action in a view, usually the last one.
- Secondary for the other actions, Ghost in toolbars and dense rows.
- Outline on busy backgrounds, Link inside text.
- Destructive only for actions you cannot undo.

## When not to use

- To move to another page: use a link.
- For an action with only an icon: use Icon Button.
- For a single choice between options: use a segmented Button Group.

## Accessibility

- A native button, so role and focus come for free.
- Loading sets aria-busy and blocks double submits.
- Focus shows a 2 px ring with a 2 px gap.
- The label stays plain text, so screen readers read it as written.

## Motion

- Press scales to 0.98 on a firm spring.
- Hover draws the label in solid ink, letter by letter. It runs when the label is plain text.
- Press waves the label one word at a time. Icons and the shortcut key stay still.
- Set animated to false to turn off the press scale, the label motion and the spinner.
- With reduced motion, press is a color change only, the label does not draw or wave, and the spinner turns slowly.