Components

Alerts

Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.

Components

Alerts are notifications that lead to important information related to the state of applications or devices, and often triggers a communication request. It may contain a title, an optional message, and one or more parts. Alert offers 4 levels of severity with a unique color and icon.

Info

Inform your user that his action had a result or show other informative text.

Alerts / INFO / Default
Info alert
Alerts / INFO / With Description
Info alert
Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint.
Alerts / INFO / Simple
Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint.

Success

Let to the user know that his action acheived the goal.

Alerts / Success / Default
Info alert
Alerts / Success / With Description
Info alert
Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint.
Alerts / Success / Simple
Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint.

Error

Show the failure after the action.

Alerts / Error / Default
Info alert
Alerts / Error / With Description
Info alert
Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint.
Alerts / Error / Simple
Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint.

Warning

Any important content.

Alerts / Warning / Default
Info alert
Alerts / Warning / With Description
Info alert
Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint.
Alerts / Warning / Simple
Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint.

Customize

This system uses three main color groups: Neutral, Primary and Accent plus four feedback related color groups: Success, Warning, Error and Info. You don't have to use nor customize all colors. You can start by adding components to your layout and changing the switches for this specific components.

Desctop alerts contains text. The length of the text is variable depending on the device, fonts, margins and padding. If the text is too long, it can be splitted and shown in preview mode where the first part will be splitted with “…“, and the other part is hidden.

Alert can have an action, such as a close or cancel button. Alert type without an icon and “X“ button controlled by the "isSimple" property.

Pellentesque porta, ex eu laoreet lacinia, sem magna porttitor tellus, id tristique nibh sem at nisi.