Skip to main content

Toast

Toast is a notification displayed at the top of the page, with short, contextual messages.

Use for system notifications, when you don't need to interrupt the user's journey. Toast must not block the screen (they are non-modal elements).

In case you need just a title, with few words, use the Toast without a message.

Toast should always float on top of content, including Drawer or Modal, displayed 32px below the upper edge of the screen and 32px from the right edge of the screen.

Use of colors

The red color should be used in critical situations that require full attention, such as deleting data, system exit, disconnection, information loss feedbacks, among others.

The yellow color should be used in attention situations, however the action effect is not critical. There is no loss of information or the action can be reversed.

The green color should be used in positive feedback situations. It is usually associated with a correct action.

The color purple should be used for information, elements or support actions, as well as situations related to the help and support of the tool.

The primary color should be used to inform new features, calling the user to meet and test.

Feedback