Design Pattern Library - Add toast messages

Add toast messages design pattern to brand.ai.

Example(s)

(Image of the pattern you are adding to the library)

Toast types
Type Image
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
example-01 example-02
With contextual navigation and side bar Without contextual navigation and side bar

Usage

(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 $blue-300.

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
spec--no-sidebar spec--no-sidebar
Mobile
  • 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 Dismiss icon. (01)
  • 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)
01 02 03
example-mobile--one-line example-mobile--two-lines example-mobile--custom-action
Animation prototype
  • https://framer.cloud/GbFkF
  • Click "Show" button, it will show the toast.
  • Click the toast, the toast will disappear.
  • Ease-in(Show up) / Ease-out (Disappear)
  • Time: .25
  • Hover over the link or action:
  • Color: $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.
✅ Do 🛑 Don’t
do-01-a-toats-show-at-a-time dont-01-two-toasts-show-at-a-time
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.
✅ Do 🛑 Don’t
do-02-two-actions dont-02-three-actions
Toasts should have a "Dismiss" button
✅ Do 🛑 Don’t
do-03-having-dismiss-button dont-03-no-dismiss-button
Aovid using for irreversible actions
✅ Do 🛑 Don’t
do-04-use-for-reversible-actions don_t-04-use-for-irreversible-actions

Related patterns

(List any related or similar solutions. If none, write: No related patterns)

No related patterns

Links / references

Pattern checklist

Make sure these are completed before closing the issue, with a link to the relevant commit, if applicable.

  1. Ensure that you have broken things down into atoms, molecules, and organisms.
  2. Check that you have not created a duplicate of an existing pattern.
  3. Ensure that you have used the proper method for creating the pattern depending on the complexity. Atoms and molecules are symbols, organisms are groups.
  4. Make sure that text is created using text styles. When applicable used shared styles for colors.
  5. 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)
Edited by Hazel Yang