Documentation
Asgard
Getting started
Theming
Guides
Inputs & forms
Pickers
Data display
Layout & docking
Feedback & overlays
Navigation & chrome
Feedback & overlays
Transient, self-dismissing feedback.
A toast notification system for brief, non-intrusive messages at configurable screen positions.
Key features:
- Provider/hook pattern:
ToastProvider+useToastfor imperative usage - Severities:
success,info,warning,error - Six position options (e.g.,
top-right,bottom-center) - Auto-dismiss with configurable
duration, or persistent (duration: 0) - Optional
actionslot for undo/retry buttons
Loading preview…
When to use it
- Save / copy / send confirmations
- Background job results
- Non-blocking notifications
Properties
| Prop | Type | Default | Description |
|---|---|---|---|
message | string | — | The main text content of the toast notification. |
severity | 'success' | 'info' | 'warning' | 'error' | 'info' | Visual severity level that determines the color scheme and default icon. |
title | string | — | Optional bold title displayed above the message text. |
position | 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right' | 'top-right' | Screen corner or edge where the toast appears. |
duration | number | 5000 | Time in milliseconds before the toast auto-dismisses. Set to 0 for persistent toasts. |
action | ReactNode | — | Optional action element (e.g., a button) rendered inside the toast for user interaction. |
icon | ReactNode | false | — | Custom icon to display. Pass false to hide the default severity icon entirely. |
Notes
- Wrap your application in ToastProvider and place a ToastContainer component at the root level to enable toast rendering.
- Set duration to 0 to create persistent toasts that remain visible until the user manually dismisses them.
- The useToast hook returns showToast, hideToast, and clearAllToasts methods for full imperative control over notifications.
Presets