Briefly reports an outcome without blocking the page, using an icon to convey tone.
<Toast
title="Draft saved"
description="Kept until you publish."
/>pnpm add @usefragments/uiImport styles once from @usefragments/ui/styles. See the installation guide for framework and theme setup.
Import Toast once, then compose its parts with dot notation.
Toast.ProviderThe icon carries the outcome; the plane stays raised.
import { Stack } from '@usefragments/ui';
<Stack direction="column" gap="sm">
<Toast title="Branch merged" description="Checks passed on main." tone="success" />
<Toast title="Usage near the limit" description="9 of 10 seats in use." tone="warning" />
<Toast title="Push failed" description="The remote refused the branch." tone="danger" />One-tap way back from something destructive, with the undo key.
<Toast
title="Deleted 3 findings"
action={{ label: 'Undo', onClick: () => {}, undo: true }}
onDismiss={() => {}}
/>Work in progress with a count, a progress line and Stop.
<Toast
title="Uploading files"
busy={{ done: 3, total: 12, onStop: () => {} }}
/>Toast.Provider owns timing and stacking; useToast dispatches.
import { useToast } from "@usefragments/ui";
function SaveButton() {
const { success } = useToast();
return <Button onClick={() => success('Draft saved')}>Save</Button>;
}Prop | Type | Default | Description |
|---|---|---|---|
action | ToastAction | undefined | Not set | One verb as a small ghost button { label, onClick, undo? }; undo shows the undo key and Mod+Z runs it while the toast is up |
busy | ToastBusy | undefined | Not set | Work in progress { done?, total?, onStop? }: a spinner, an 'N of M' count with a progress line, and Stop. A busy toast has no timer. |
description | React.ReactNode | Not set | One sentence more, if it helps |
onDismiss | (() => void) | undefined | Not set | Draws the dismiss button |
Provider.childrenRequired | React.ReactNode | Not set | — |
Provider.duration | number | undefined | Not set | Default milliseconds on screen. Anything under 5000 is raised to 5000; 0 keeps toasts until dismissed. |
Provider.position | ToastPosition | undefinedbottom-endbottom-centertop-center | Not set | Where the stack sits. |
title | React.ReactNode | Not set | One line on what happened |
tone | ToastTone | undefinedwarningdangerneutralsuccess | neutral | The outcome. Semantic tones draw an icon in the tone's ink; the plane, title and body never change colour. Only danger announces urgently. |