Toast
Toasts are used to communicate with end-users, and to provide real time feedback on responses to common items.
Interactive Playground
The Interactive Playground allows you to experiment with various Toast styles. Once you get the results you want, copy the HTML or React code provided and paste it into your application.
<div class="neo-toast" role="alert" aria-live="polite"><div class="neo-toast__message">This is a toast</div></div>
<Toast position="top" duration={2000}>This is a toast</Toast>
Anatomy
When you want to give feedback to your users about a action they take. Often this is in the form of creation or deletion.
Container:
The toast is contained within a solid field with contrasting background color to help draw attention to it on a busy screen.Icon (optional):
An icon can help to graphically show the status of the action.Label:
This is the text announcement that explains the result of the action.
Behavior
When you want to give feedback to your users about a action they take. Often this is in the form of creation or deletion.
| Component | Priority | User Action |
|---|---|---|
| Toast | Low priority | Feedback (Alert) that does not interrupt the user flow. They should be used for confirmation in response to an action. Toasts are timed to disappear automatically without user involvement. |
| Notification | Prominent priority | Items that require immediate attention. They can be persistent or dismissible depending on the context. Dismissible notifications remain until closed by the user, or if the state that cause the notification is resolved. (Notification inline) |
| Modal | Highest priority | Modals block any further use of the app until the user acknowledges the message or resolves the issue. |
Placement
Toasts are placed in a location that is easily visible to users, but does not obstruct their view or interrupt their flow. A common placement for toast notifications is in the top center of the screen.
If multiple toast notifications are triggered in quick succession, they should be stacked on top of each other to avoid cluttering the screen. Each notification should be visible for a short period of time before disappearing, allowing users to quickly scan through them if necessary.
DO: Use a toast to provide feedback for commonly performed actions.
DON'T: Do not use a toast to display error message, use notification component instead.
Duration
The duration of a toast should be short enough to convey the message, but not so long that they become a distraction or annoyance. A common duration for a toast is between 2-5 seconds, depending on the complexity of the message and the user's familiarity with the app or website.
Text Length
The toast message should be short. It should not have a lot of text nor cover a large part of the screen. Avoid wrapping the text onto multiple lines where possible.
DO: Try to keep the message in the toast short enough to appear on one line.
DON'T: Do not unnecessarily add text or wrap it onto multiple lines if possible.
Specs
A toast adheres to the following guidelines.
