Variant
The component comes with 4 color variations (success, information, warning and danger) and 3 different sizes : a Default, Inline, and a Responsive one much smaller. The dismiss button can be activated or not with every variant of this component.
Default
Inline
Dismiss button
|
|
With dismiss button |
Without dismiss button |
|---|---|---|
|
Default |
|
|
|
Inline |
|
|
|
Responsive |
|
|
Display order
The notifications order is based on the chronology, the newest goes on top and the oldest at the bottom.
Duration
On average people can read approximately 4 words per seconds (238 words per minutes), then it is recommended to display the notification during minimum 4000 milliseconds to let the time to the user to read (this is an estimation for the max characters in a notification).
Animation
The notifications appears from outside the viewport and move in from the right, it stays displayed for 4000 milliseconds before being dismiss to the right out of the screen.
When multiple notifications are to be displayed, the next arriving goes on top on the previous, with a maximum of 3 notifications to be displayed at the same time.
Once the timer of one notification is over, it get dismiss to the right and the others stick to the bottom and replace the oldest one. The process repeats itself until all notifications are gone.
Responsive Design
|
|
Event - Notification hover
When a notification is hovered by the user, the timer will pause and the notification will stay visible. Otherwise, the timer will continue until the end.
