Alerts

Alerts are used to capture the attention of the user in an intrusive way. Sometimes just to say that something went right, others to say that something needs to be reviewed.

Types

TypeUsage
InformationBlue color. Information alerts are used to inform users about things that occur while they are carry out a task.
SuccessGreen color. Success alert messages will appear when everything was ok. (E.g.: “The user was created successfully”).
WarningYellow color. This alert lets users know that the action they performed was done but there are some issues with it. (E.g. The item was created but with there were some issues).
ErrorRed color. This alert indicates that something went wrong after performing an action. (E.g.: Form couldn’t be saved because some data was missing)

Variations

Temporary alert stripe

This message is meant to disappear after a short period of time, so it must be the case that the user doesn't have time to read it and there must not be a consequence for not reading it. This type of alerts have embedded links in case you need them.

temporary information alert stripe

temporary success alert stripe

temporary warning alert stripe

temporary error alert stripe

Dismissible alerts stripe

Use this kind of alerts to inform users about something and to ensure they don‘t miss the information. These alerts can contain links to carry out actions such as undoing actions or visiting a page. This alert is placed right below the navigation bar.

dismiss information alert stripe

dismiss success alert stripe

dismiss warning alert stripe

dismiss error alert stripe

Alert notification

Notifications display information about something that has happened or is happening in the system. These alerts are not related to actions that are being performed by the user at that moment. Unlike alerts, notifications are displayed on the top right corner of the screen. Both desktop and mobile notifications have similar dimensions.

set of four notification alerts

Attributes

attributes for stripe alerts and notification alerts

Menu