Diwa Design System

Toast

Toast notifications display brief, auto-dismissing messages in the corner of the screen.

diwa-toast

Singleton container component. Place one instance in your root layout and call addMessage() to queue toast notifications.

Properties

NameTypeDefaultDescription
theme'dark' | 'light''dark'Per-component theme override. Propagated to all rendered toast items.

Methods

NameSignatureDescription
addMessage(message: ToastMessage) => Promise<void>Queues a new toast notification. Auto-dismisses after the specified duration (default 5 000 ms). Set duration to 0 to disable auto-dismiss.

ToastMessage interface

PropertyTypeRequiredDescription
textstringYesThe message text to display.
state'neutral' | 'success' | 'error' | 'warning' | 'info'NoVisual state. Defaults to neutral.
durationnumberNoAuto-dismiss delay in milliseconds. Defaults to 5 000. Set to 0 to disable auto-dismiss.

diwa-toast-item

Individual toast notification item. Managed internally by diwa-toast — do not render this component directly.

Properties

NameTypeDefaultDescription
textstring''The message text to display.
state'neutral' | 'success' | 'error' | 'warning' | 'info''neutral'Visual state controlling the icon and colour scheme.
theme'dark' | 'light''dark'Per-component theme override. Inherited from diwa-toast.

Events

NameDetail typeBubblesDescription
dismissvoidNoEmitted when the user clicks the close button. diwa-toast listens for this event to remove the message from the queue.