Anatomy
- Leading icon: (Optional) Visual indicator that reinforces the message
- Content: The main message text that provides feedback to the user
- Action button: (Optional) Allows users to take a related action like "Undo" or "View Details"
- Close button: Allows manual dismissal of the toast
Usage Guidelines
When to use this component
- When confirming actions performed by users like "Appointment scheduled" or "Info updated"
- Use to provide quick feedback after form submissions such as "Information saved"
-
Use for temporary status updates like "Connection lost"
When not to use this component
- For high relevant messages that need to remain in the interface, use the Banner instead
- For information that users need to reference later
- For complex messages with multiple actions, use Modal dialog instead
-
For marketing messages or promotional content
Best Practices
Use a Toast to confirm an action taken by the user.
Do not rely on toasts to be seen, as they are temporary. Keep them short, and do not use them for critical messages.
Use icons for affordance clarity or to highlight the nature of the toast message.
Don’t use icons for decorative purposes, or that don’t portray the meaning of the toast. In those cases might be better to use text only.
Use a toast for temporary status updates.
Use the error variant exclusively for systemic errors (for example, no internet connection or error connecting to the database). In other scenarios, the error message needs to go in context, so use patterns embedded in other components.
General Component Behaviors
Max-width
The max-width defined for this component is 360px, which makes its content more direct.
Stacking
When multiple toasts are triggered, they are displayed in a stack, showing a response to each of the actions the user has taken.
The gap between each toast is --w-space-s.
Placement
The placement of the toast can be configured, making it possible to display it centered at the top or centered at the bottom of the page. By default, its position is at the bottom of the page.
Offset
For both bottom and top positions, the toast is displayed --w-space-m away from the edge of the page.
Time out
By default, the toast is set to disappear after 5000ms. This time can be configured with the timeOut prop.
Responsive Behavior
Offset
For both bottom and top positions, the toast is displayed --w-space-s away from the edge of the page.
Variants
Default
By default, this is the status displayed by the component to provide neutral feedback.
Error
To provide feedback more closely related to the error, the “error” status of the component is displayed.
Text alone
Only displays content in text format.
Leading icon
In addition to the text content, it displays an icon that helps reinforce the message being conveyed.
Trailing action
Apart from the text content, it also displays an action closely related to the action that has just been performed.
Icon and action
Both the icon and the action are displayed, along with the text content.
Content Guidelines
Content
- Should be brief. 2 most important ones are
- success: when user action was completed (like adding/activating something)
- danger: when the action completed by the user is a definitive one (like deleting something).
- Messages should be scannable at a glance and provide clear value to the user.
Actions
- They should be 3 words max and describe what can a user expect after clicking them.
- Terminology used for actions must be consistent throughout the product.
For further information, see the Content Styleguide.
Known Gaps
- Redefine limits for component content (max-lengths for action and toast content text)
- Additional accessibility score details and guidelines.