## 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 | <img src="/uploads/221d0e9a7c0208f83150cc50b0061f7b/single-line.png" width=50% /> | | Single line message with an action | <img src="/uploads/9228bc88ee917619c284bc49fb0ea1a3/single-line-with-an-action.png" width=50% /> | | Two lines message with a custom action | <img src="/uploads/0bebdd28f83e143595ab2a1a6cc18a89/2-lines.png" width=50% /> | | Two lines message with an action | <img src="/uploads/6319b8cda01d1bcbcbc5f6007093361c/two-lines-with-an-action.png" width=50% /> | | 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 | | -- | -- | |  |  | ##### 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~~ | | ---------------- | ----------------- | ----------------- | |  |  |  | ##### 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. | :white_check_mark: Do | :stop_sign: Don’t | |------------------------|-------------------| |  |  | ##### 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. | :white_check_mark: Do | :stop_sign: Don’t | |------------------------|-------------------| |  |  | ##### Toasts should have a "Dismiss" button | :white_check_mark: Do | :stop_sign: Don’t | |------------------------|-------------------| |  |  | ##### Aovid using for irreversible actions | :white_check_mark: Do | :stop_sign: Don’t | |------------------------|-------------------| |  |  | ### 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. [x] Ensure that you have broken things down into atoms, molecules, and organisms. 1. [x] Check that you have not created a duplicate of an existing pattern. 1. [x] Ensure that you have used the proper method for creating the pattern depending on the complexity. Atoms and molecules are symbols, organisms are groups. 1. [x] Make sure that text is created using text styles. When applicable used shared styles for colors. 1. [x] 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)