Toast
Provide lightweight feedback to user actions.
Toasts come in two variants: system and app.
View in Storybook
Behavior
- Toasts are displayed in the upper-right page corner and disappear after five seconds.
- Toasts have a fixed width of 400 px.
- Place toasts at 16 px under the OS bar or, if using a side modal, at 81 px and 16 px from the top and right of the viewport, respectively.
- When displaying a toast group, place them 8 px away from each other. New toasts should appear under the old ones, with older toasts pushed up until they are automatically dismissed.
- You can add an action button to toasts, for instance, to display their details. Ensure this action is still available in the UI when the toast is dismissed.
- Notifications in system toasts are clickable and allow users to open details in the notification center.
Usage
System
Use system toasts to provide quick, at-a-glance feedback to user actions when you can't use an inline message: for background processes or when users are taken to a different page, etc.
App
Use app toasts for notifications from other apps in Open OS to display direct messages or mentions, ads, updates, etc.
Best practices
- Keep the toast messages short and simple, such as File archived, New update available, etc.
- Avoid using toasts for system-level feedback — consider using a banner instead.
Accessibility
Keyboard focus
- The keyboard focus state applies only to Action buttons within the Toast message.
- It adopts the button’s visual hover state and adds a 2px white ring.
Keyboard interactions
Since only buttons are focusable, refer to the ARIA Authoring Practices Guide: Button Pattern for guidance on expected keyboard interactions, including roles, states, and properties.
Resources
Refer to Understanding 2.1.1 Keyboard for more information on expectations, intent, benefits, and techniques.