The Alert component displays high-priority messages that require user’s attention. It is also known as a “system alert” or “global message”.

Experimental component

This is a first iteration of the Alert component currently implemented in the Allocate application. The component is displayed across the application, but only for those who are classified as ‘Admin users’.

The Design System team are discussing our approach to ‘global messaging’ approach so this component is not ready for general use.

{{ aspExample({ code: "", nunjucks: "", json: "", title: "", example: "default", id: "65a92a41e4915" }) }} {{ aspExample({ code: "", nunjucks: "", json: "", title: "", example: "green", id: "68cada2d4d5ea" }) }} {{ aspExample({ code: "", nunjucks: "", json: "", title: "", example: "amber", id: "68caea2977aaa" }) }} {{ aspExample({ code: "", nunjucks: "", json: "", title: "", example: "red", id: "68caea2977aed" }) }} {{ aspExample({ code: "", nunjucks: "", json: "", title: "", example: "grey", id: "68caea2977b31" }) }} {{ aspExample({ code: "<div class=\"asp-alert asp-alert–red\" role=\"region\">
<div class=\"asp-container\">
<p><strong>Plane crash in Ahmedabad</strong>: The UK is working with local authorities in India to urgently establish the facts and provide support to those involved. <a href=\"#\">What to do if you have concerns about friends or family</a>.</p>
</div>
</div>", nunjucks: "", json: "", title: "", example: "", id: "68db8c5246f58" }) }}

When to use this component

Use the Alert component to notify users of critical, system-wide issues that require immediate attention. This includes errors, warnings, or important updates that affect the whole service or system.

When not to use this component

Do not use the Alert component for contextual or page-specific messages. For example:

Success messages after form submissions
Informational notes within a page
Status updates relevant only to a specific section

For these cases, consider using the ‘Notification‘ component instead.

Examples of where we have used this component

Allocate – purpose a “system health” warning related to the import of data

Status of development

The below criteria all need to be met for a component to be considered as fully developed for use within the ASP Digital Design System.

{{ aspTable({
head: [
{ text: 'Development criteria'},
{ text: 'Status'}
],
rows: [
{
cells: [
{ text: 'WCAG 2.2 compliant'},
{ html: '<span class="status">Not started</span>'}
]
},
{
cells: [
{ text: 'WCAG 2.1 compliant'},
{ html: '<span class="status status–red">Failing</span>'}
]
},
{
cells: [
{ text: 'HTML / Nunjucks version'},
{ html: '<span class="status status–green">Completed</span>'}
]
},
{
cells: [
{ text: 'Figma version'},
{ html: '<span class="status status">Not started</span>'}
]
},
{
cells: [
{ text: 'M365 versions'},
{ html: '<span class="status status–green">Completed</span>'}
]
},
{
cells: [
{ text: 'Documentation'},
{ html: '<span class="status status–yellow">In progress</span>'}
]
}
]
}) }}