Toast
Transient floating notifications for short feedback messages, with optional actions and auto-dismiss.
Examples
Default
A basic toast with a title, description, and dismiss button.
Intents
Semantic colors and icons for success, error, warning, and info.
Sizes
Two sizes — compact sm and standard md.
With action
Pair a toast with an inline CTA button for follow-up actions.
Title only
A minimal toast that omits the description for short, single-line feedback.
Loading
Toast-shaped skeleton placeholders for queued or loading notifications.
Usage
import { Toast, ToastProvider, Toaster, useToast } from "@tessinaui/ui/toast";Setup
Wrap your app (or layout) with ToastProvider and place Toaster where you want notifications to appear.
export default function RootLayout({ children }) {
return (
<ToastProvider>
{children}
<Toaster position="bottom-right" />
</ToastProvider>
);
}Firing a toast
function MyComponent() {
const { toast } = useToast();
return (
<button onClick={() =>
toast({
title: "Changes saved",
description: "Your profile has been updated successfully.",
intent: "success",
action: { label: "Undo", onClick: handleUndo },
})
}>
Save
</button>
);
}API
Toast
| Prop | Type | Default | Description |
|---|---|---|---|
title | ReactNode | — | Bold heading line |
description | ReactNode | — | Supporting body text |
intent | "none" | "error" | "warning" | "success" | "info" | "none" | Semantic color and default icon |
size | "sm" | "md" | "md" | Compact or standard size |
icon | ReactNode | — | Overrides the default intent icon |
showIcon | boolean | true | Show/hide the leading icon |
action | ToastAction | — | Inline CTA button |
onClose | () => void | — | Renders a dismiss (×) button |
dir | "ltr" | "rtl" | "ltr" | Text direction |
className | string | — | Extra class names |
ToastAction
| Prop | Type | Default | Description |
|---|---|---|---|
label | string | — | Button label |
onClick | () => void | — | Click handler |
variant | ButtonVariant | "primary" | Button style override |
Toaster
| Prop | Type | Default | Description |
|---|---|---|---|
position | ToastPosition | "bottom-right" | Screen corner for the stack |
maxVisible | number | 5 | Max simultaneously shown |
defaultDuration | number | 5000 | Auto-dismiss ms (0 = persistent) |
defaultSize | "sm" | "md" | "md" | Fallback size |
defaultDir | "ltr" | "rtl" | "ltr" | Fallback direction |
useToast
const { toast, dismiss, dismissAll, toasts } = useToast();| Return | Type | Description |
|---|---|---|
toast | (data: ToastData) => string | Adds a toast; returns its id |
dismiss | (id: string) => void | Removes a toast by id |
dismissAll | () => void | Clears all toasts |
toasts | ToastData[] | Current toast stack |
ToastData
| Prop | Type | Default | Description |
|---|---|---|---|
title | ReactNode | — | Heading (required) |
description | ReactNode | — | Supporting text |
intent | ToastIntent | "none" | Semantic color |
size | ToastSize | Toaster default | Override size |
dir | "ltr" | "rtl" | Toaster default | Override direction |
action | ToastAction | — | Inline CTA |
duration | number | 5000 | ms before auto-dismiss; 0 = persistent |
icon | ReactNode | — | Custom leading icon |
showIcon | boolean | true | Show/hide icon |
Position values
| Value | Description |
|---|---|
"top-left" | Top-left corner |
"top-center" | Top-center |
"top-right" | Top-right corner |
"bottom-left" | Bottom-left corner |
"bottom-center" | Bottom-center |
"bottom-right" | Bottom-right corner (default) |
Time Picker
Three time-picker variants — a drum-roll wheel, a typed HH:MM input field, and a button-triggered popover. Supports 12h/24h formats, seconds, configurable minute steps, all intent colours, RTL, and keyboard navigation.
ToggleButton
A button that toggles between on and off states, with the same variant, intent, size, and rounded system as Button. Shows a persistent pressed visual when active.