# Toast

A short message that melts from a pill into a card. Eight kinds, with stacking and swipe.

Tier: Free

## Installation

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

## Usage

```tsx
import { Toaster, toast } from '@/components/fetaui/toast'

export function Example() {
  return (
    <>
      <Toaster />
      <button onClick={() => toast({ kind: 'success', title: 'Changes saved' })}>Save</button>
    </>
  )
}
```

## API

| Prop | Type | Default |
|---|---|---|
| kind | success, error, warning, info, loading, action, undo, promise | required |
| title | string | required |
| description | string |  |
| action | { label, onClick } |  |
| cancel | { label, onClick } |  |
| progress | number |  |
| meta | string |  |
| duration | number | 6000 |
| Toaster position | top-right, bottom-right, bottom-center, top, bottom | bottom-right |
| Toaster animated | boolean | true |
| toast.update | (id, patch) => void |  |
| toast.dismiss | (id) => void |  |
| toast.promise | (promise, copy) => Promise |  |

## When to use

- For the result of an action the person took.
- For system news that does not block work.
- Titles of three words, descriptions of one or two lines.

## When not to use

- For anything that needs a decision: use a Dialog.
- As the only path to an action.

## Accessibility

- A polite live region, with errors assertive.
- Actions are real buttons.
- Timers pause on hover and focus.

## Motion

- The pill drops in over 240 ms, then the tray melts out on a 600 ms spring after 150 ms.
- It collapses 2 s before a 6 s timeout. Undo counts down from 5 s.
- Older toasts scale down and rise on a spring, peeking 38 and 74 px.
- With reduced motion, shapes crossfade, stacks jump and Undo shows only mono seconds.