Toast
Toast components are transient notifications that appear and disappear automatically after a set time. They offer a space-saving way to deliver brief, non-critical messages to users without interrupting their primary workflow.
API Reference
| Prop | Type | Default |
|---|---|---|
variant | VariantTypes | information |
headline | string | - |
content | string | - |
show | boolean | false |
filled | boolean | false |
duration | number | - |
onDismiss | () => void | - |
Examples
Filled
Usage
General Guidelines
Do's
- Present concise and informative content within the toast, avoiding overwhelming the user.
- Position toasts strategically to avoid obscuring primary content while remaining visually noticeable.
Don'ts
- Overuse toasts, excessive notifications can be disruptive and lead to information overload.
- Convey critical information, reserve toasts for non-critical messages, as they might be easily missed.
Writing Guidelines
When to use
- Use to provide non-critical feedback on user actions (e.g., "Item added to cart").
- Use to display brief system messages (e.g., "Connection successful").
When not to use
- Don't use when conveying lengthy or complex messages (consider modal windows or in-app notifications).
- Don't use when conveying critical errors or warnings (use more prominent alerts).
Use Case
General Use Cases
Toast are typically use for non-critical confirmations for actions (e.g., "File uploaded").
Also for short system messages (e.g., "Network connected").
Digital Health Use Cases
For Digital Health Applications toast can be used for confirmations like "Medication reminders on" or updates like "Data syncing..." during health data synchronization.
Accessibility Guidelines
- Use
aria-describedbyattribute to provide descriptive text for an element, offering additional context or explanation. - Add
aria-haspopupto indicates the availability and type of interactive popup element that can be triggered by the element on which the attribute is set.