Inline alerts are meant to communicate any sort of contextual information. They are placed inside the container, right next to the elements they relate to.
|
|
|
Component |
Usage |
Placement |
User action |
|---|---|---|---|
|
Inline alert |
Contextual use It's related to the page content |
Inside the container |
Depends on the context. Alerts remain until the state that caused the alert is resolved or altered. |
|
Similiar components |
Usage |
Placement |
User action |
|---|---|---|---|
|
Global/system use It's related to the system itself and not a specific page or element. |
On the very top of the screen, full width |
Same as above |
Anatomy
Structure
|
|
|
|
|
|
|
context icon |
One can only use the icon on alert messages that don’t have titles and/or actions.The usage of an icon is optional. |
|
description |
The only single mandatory element. All alert messages must have at least a description. |
|
title |
If there is a title, there must not be an icon.Titled alert messages can have actions.Having a title is optional.
Titles should:- Contain a brief, clear statement or question- Avoid apologies (“Sorry for the interruption”), alarm (“Warning!”), or ambiguity (“Are you sure?”) |
|
actions |
There should not be more than two action buttons.The actions are optional. |
Sizes and Spaces
|
The compact inline alert will only contain the description. Hence, the only spacing there is to it is the 4px top and bottom padding and the 8px left and right padding.
|
|
The regular inline alert with an icon has an 8px padding all around. The spacing between the context icon and the description is also 8px. When there is text wrap, the context icon remains vertically centred with the text. |
|
The regular inline alert with title and actions has a 12px padding all around. The vertical spacing between elements is 8px. The spacing between the action buttons is 16px. |
Properties
|
Property |
Value |
Description |
|---|---|---|
|
Type* |
notification-strong notification-light
fail-strong fail-light
alert-strong alert-light
success-strong success-light |
Depends on the nature of the message that's being displayed.
A strong accent* should be used when the alert needs to have a stronger prominence.
A light accent* should be used when the alert is important, but not impeding the user to complete their task.
Hierarchically, strong-accented alerts are in a higher position compared to light alerts.
Check the example below. |
|
Size |
compact regular |
The size chosen must reflect the importance of the message conveyed. |
|
Title |
true false |
When the message has a high priority or the content of the message is complex, there should be a title to clarify the communication.
Only available in m size |
|
Icon |
true false |
The icon can be used to provide further context. Only available in s size. |
|
Actions |
true false |
When the user can act upon the message conveyed, there can be actions in the footer of the alert. Only available in m size. |
*To help visualize the difference between light and strong accents, check the example below.
|
|
Behaviour
Interaction
Inline alert's link behaviour on mouse hover
Responsiveness
Inline alert responsiveness
The inline alert has a fluid width and for this reason, it has 100% of the container width it's placed in. As for its height, the inline alert adjusts to its content's height.
The inline alert does not have any max-width, min-width, max-height or min-height set.
Guidelines
|
|