Toast
Transient floating notifications for short feedback messages, with optional actions and auto-dismiss.
Showcase
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) |
Banner
Promotional / informational surface for marketing, onboarding, upsell, and announcements. Three layouts (inline, centered, landscape with edge-to-edge image), four variants, six intents, prefix/suffix slots, primary + secondary actions, inline arrow link, optional footer row, dismissible, LTR/RTL.
Tooltip
Rich tooltip card for product tours, feature walkthroughs, and contextual help. Supports title, image, subtitle, description, keyboard shortcuts, step counter, navigation buttons, a close button, 5 intent colors, 6 rounded variants, and all 12 arrow positions.