Design Pattern Library - Add toast messages
Add toast messages design pattern to brand.ai.
(Image of the pattern you are adding to the library)
|Single line message|
|Single line message with an action|
|Two lines message with a custom action|
|Two lines message with an action|
|Example - 01||Example - 02|
|With contextual navigation and side bar||Without contextual navigation and side bar|
(When do you use this pattern? And how? This is being collected for design.gitlab)
Toasts are used for system messages. The messages are short and simple. Only a toast can be displayed at a time. It may contain a dismiss button and an action button depends on the situations. The color of the action button is
Toasts appear with ease-in animation from the bottom and display at the left-bottom of the screen. Toasts exit by clicking “Dismiss” button or automatically disappear with ease-out animation after a timeout. If you hover over a fading out toast, the toast will remain until the cursor moves out.
The maximum width of toasts is
568px. The alignment and pixel spacing from the bottom and left sides of the viewport:
|Screen with contextual navigation||Full-width screen|
- The width of toast is full.
- Toasts don't have the rounded corners in the shape.
- If the message has only one line and the only action is to dismiss, the toasts retain the
- If the message wraps onto another line:
- If there's a dismiss and a custom action, put them below the message, aligned to the right, with the “Dismiss” action first (02)
If there is only a custom action (no dismiss action) and the text wraps into another line, put the action below the message (03)
- Click "Show" button, it will show the toast.
- Click the toast, the toast will disappear.
Ease-in(Show up) /
- Hover over the link or action:
$blue-300 :: 73AFEA-->
$blue-200 :: B8D6F4
Dos and Dont's
(Use this table to add images and text describing what’s ok and not ok. This is being collected for design.gitlab)
Showing only a toast at a time
- If there are two toasts, the second toast should appear after the first toast disappeared.
Toasts can contains a "Dismiss" button and an action button.
- Don't have an extra button other than a "Dismiss" button and an action button.
Toasts should have a "Dismiss" button
Aovid using for irreversible actions
(List any related or similar solutions. If none, write: No related patterns)
No related patterns
Links / references
Make sure these are completed before closing the issue, with a link to the relevant commit, if applicable.
- Ensure that you have broken things down into atoms, molecules, and organisms.
- Check that you have not created a duplicate of an existing pattern.
- Ensure that you have used the proper method for creating the pattern depending on the complexity. Atoms and molecules are symbols, organisms are groups.
- Make sure that text is created using text styles. When applicable used shared styles for colors.
- QA check by another UX'r (create and reference a file in this issue which includes the changes as you would like to add them to the gitlab-elements file)