# Toast

Toasts as a deck at the bottom end: hover or focus fans out the history, ↩ undoes (⌘Z), a flick dismisses.

Source page: https://sproutboat.com/ikada/components/toast

## Installation
```sh
npx shadcn@latest add https://sproutboat.com/ikada/r/toast.json
```
Or from the package: `import { ToastProvider } from "@sproutboat/ikada";`
## Usage
```tsx
import { ToastProvider } from "@/components/ikada/toast";

<Button onClick={() => toast.add({ tone: "success", title: "Deployed", description: "robin is live." })}>Show toast</Button>
```
## Examples
### Tones
Hover the stack to fan it out. Alt+T focuses it.
```tsx
<Button onClick={() => toast.add({ title: "Settings saved" })}>Neutral</Button>
<Button
  variant="primary"
  onClick={() => toast.add({ tone: "success", title: "Deployed", description: "robin is live." })}
>
  Success
</Button>
<Button
  variant="danger"
  onClick={() =>
    toast.add({
      tone: "danger",
      title: "Deploy failed",
      description: "Build exited with 1.",
    })
  }
>
  Danger
</Button>
```
### Actions
A ghost action is plain underlined text; a danger one is a red button.
```tsx
<Button
  onClick={() =>
    toast.add({
      tone: "danger",
      title: "Deploy failed",
      description: "wren: build exited with 1.",
      actions: [
        { label: "View build log", onClick: ({ close }) => close() },
        { label: "Retry", variant: "danger", onClick: ({ close }) => close() },
      ],
    })
  }
>
  With actions
</Button>
```
### In progress
busy spins the glyph and progress draws the line. Update a toast in place by reusing its id.
```tsx
<Button
  onClick={() => {
    const id = toast.add({
      id: "deploy-finch",
      tone: "info",
      title: "Deploying finch",
      busy: true,
      progress: 0.4,
      duration: 0,
    });
    setTimeout(
      () => toast.update(id, { tone: "success", title: "finch is live", busy: false, progress: null, duration: 5000 }),
      2500,
    );
  }}
>
  Deploy finch
</Button>
```
## Props
### ToastProviderProps

| Prop | Type | Description |
| --- | --- | --- |
| onToast? | `((event: ToastEvent) => void)` | The history hook: called for every add, merge, update and close. For an Activity feed or a bell. |
| limit? | `number` | Toasts kept on screen at once; older ones are dropped. Default 5. |
| label? | `string` | Accessible name of the region. Default `Notifications (Alt+T)`. |
Source: https://github.com/baronunread/ikada/blob/main/src/components/toast.tsx