Toast
Toasts as a deck at the bottom end: hover or focus fans out the history, ↩ undoes (⌘Z), a flick dismisses.
<Button onClick={() => toast.add({ tone: "success", title: "Deployed", description: "robin is live." })}>Show toast</Button>Props
tone
Installation
npx shadcn@latest add https://sproutboat.com/ikada/r/toast.jsonThe CLI writes components/ikada/toast.tsx and merges the ikada theme into your CSS. It also installs the components it is built from: Button, Status Glyph and Tooltip. Or take it from the package: import { ToastProvider } from "@sproutboat/ikada";
Usage
import { ToastProvider } from "@/components/ikada/toast";
<Button onClick={() => toast.add({ tone: "success", title: "Deployed", description: "robin is live." })}>Show toast</Button>Examples
<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><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><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
| 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: src/components/toast.tsx