Alertalternative
Use Alert for persistent inline messagesToast
Brief, non-blocking notification messages
Setup
import { Toast } from '@fragments-sdk/ui';Examples
Default
Interactive toast demo - click buttons to trigger toasts (includes helper object syntax example)
Loading preview...
Success
Success message variant
Loading preview...
Error
Error message variant
Loading preview...
Warning
Warning message variant
Loading preview...
Info
Informational message variant
Loading preview...
With Action
Toast with an action button
Loading preview...
Props
| Prop | Type | Default | Description |
|---|---|---|---|
onDismiss | function | Not set | Callback when toast should be dismissed |
title | string | Not set | Toast title |
description | string | Not set | Additional message content |
variant | enumdefaultsuccesserrorwarninginfo | default | Visual variant indicating message type |
duration | number | 5000 | Auto-dismiss duration in ms (0 = no auto-dismiss) |
action | object | Not set | Optional action button { label, onClick } |
id | string | Not set | — |
onPause | function | Not set | Callback when auto-dismiss timer should pause |
onResume | function | Not set | Callback when auto-dismiss timer should resume |
Usage Guidelines
When to use
- Providing feedback after an action
- Showing success/error status of operations
- Non-critical information that doesn't require action
- Temporary messages that auto-dismiss
When not to use
- Critical errors requiring user action (use Dialog)
- Persistent information (use Alert)
- Inline validation (use form error states)
- System-wide announcements (use Banner)
Best practices
- Keep messages brief and actionable
- Use appropriate variant for the message type
- Auto-dismiss after reasonable duration (3-5s)
- Allow manual dismissal for longer messages
- Limit number of simultaneous toasts
- useToast() variant helpers accept either (title, description?) or an options object for action/duration/id
Accessibility
- Use role="alert" for important messages
- Ensure sufficient display time for reading
- Don't rely solely on color for meaning
- Provide dismiss button with accessible label