Design
Component Health Check
In-Line Alert Overview
The In-Line Alert is used to highlight important information on a page. The in-line alert is not interactive and is in a fixed position on the page. The messages it can communicate can be informational, cautionary, error related or success related.
In-Line Alert Principles
When to Use
The In-Line Alert should be used to communicate persistent information relating to the the user's experience on that page, e.g. an error message, a cautionary message, an informational message, etc.
When Not to Use
The In-Line Alert component should not be used when the message being communicated is temporary or is accompanied by a call-to-action. In this instance a toast component should be used instead. See the toast component here.
Anatomy
The In-Line alert component consists of 3 parts: 1) The icon, 2) the message and 3) the container.
Colour
The colours used in the component vary depending on it's state - to learn more about this please see the options section.
Type
The title of the message is in the SPARK defined Bold Body style and the message itself is in the SPARK defined Body style. To learn more about the SPARK text styles please navigate here.
Options
Informational State
Container Colour: Grey 90
Icon & Text Colour: Black 80
Success State
Container Colour: Green 100
Icon & Text Colour: Green 30
Caution / Warning State
Container Colour: Yellow 100
Icon & Text Colour: Yellow 30
Error State
Container Colour: Red 100
Icon & Text Colour: Red 30
To learn more about SPARK defined colours please navigate here.
Behaviours
The In-Line Alert has no interactive behaviours for end users. The state the alert appears in is pre-determined by the designer. To learn more about the basics that make up these states please navigate here.