Installation
npx sdaia-ui@latest add toast
Usage
import { Toast, ToastProvider, useToast } from '@/components/ui/Toast';1<Toast2type="success"3title="Changes saved"4message="Your changes were saved successfully."5actionLabel="Undo"6onAction={undo}7onClose={() => setOpen(false)}8/>
1const toast = useToast();2toast.show({ type: "success", title: "Record saved", actionLabel: "Undo", onAction: undo });
Examples
Default
Title, message, one action and the close button. The toast closes itself after five seconds; hover or focus pauses the timer.
Loading demo: toast-default
Types
Five types pair a colour with an icon so the outcome is clear at a glance.
Loading demo: toast-types
Neutral
General information that is not good or bad news.
Loading demo: toast-neutral
Info
Helpful context about what the system is doing.
Loading demo: toast-info
Success
The action completed as expected.
Loading demo: toast-success
Warning
The action worked but needs attention.
Loading demo: toast-warning
Error
The action failed. Pair it with a retry action. Error toasts stay until the user closes them.
Loading demo: toast-error
Title only
The message and the action are optional.
Loading demo: toast-title-only
ToastProvider and useToast
Show toasts from anywhere below the provider. They appear at the bottom-end corner of the screen, one at a time; the next one waits until the current one closes.
Loading demo: toast-provider
Arabic (RTL)
The layout mirrors and reads right to left.
Loading demo: toast-rtl