Updated: This page has been updated. See DESY-142 for details.

Alerts

An alert gives users important information about their current task, without them having to leave the screen.

Wrap any text and an optional dismiss button in .alert for basic alert messages.

Anatomy

Container
Icon
Body content
Close (optional)

Types of alert

Options

You have four types to choose from: success, info, warning and error. Pick the one that best fits the message you're trying to convey.

Please keep in mind that the icons for these message types can't be changed.

To apply a type to your alert message simply add one of the following classes: .alert-success, .alert-info, .alert-warning or .alert-danger.

Example
HTML

Success .alert-success

Well done!

You successfully read this important alert message.

<p class="mb-8"><b>Success</b> <code>.alert-success</code></p>
<div class="alert alert-success" role="alert">
	<p><strong>Well done!</strong></p>
	<p>You successfully read this important <a href="#">alert message</a>.</p>
</div>

Example
HTML

Info .alert-info

Heads up!

This alert needs your attention, but it's not super important.

<p class="mb-8"><b>Info</b> <code>.alert-info</code></p>
<div class="alert alert-info" role="alert">
	<p><strong>Heads up!</strong></p>
	<p>This alert needs your attention, but <a href="#">it's not super</a> important.</p>
</div>

Example
HTML

Warning .alert-warning

Warning!

Better check yourself, you're not looking too good.

<p class="mb-8"><b>Warning</b> <code>.alert-warning</code></p>
<div class="alert alert-warning" role="alert">
	<p><strong>Warning!</strong></p>
	<p>Better check <a href="#">yourself</a>, you're not looking too good.</p>
</div>

Example
HTML

Danger .alert-danger

Oh snap!

Change a few things up and try submitting again.

<p class="mb-8"><b>Danger</b> <code>.alert-danger</code></p>
<div class="alert alert-danger" role="alert">
	<p><strong>Oh snap!</strong></p>
	<p>Change a <a href="#">few things up</a> and try submitting again.</p>
</div>

Title

A bolded title is optional. Use a title to quickly summarise the purpose of the notice. Keep titles short, no more than 60 characters, and avoid repeating the body text.

Example
HTML

Alert with title

Alert title

You've confirmed [email protected]. You're all ready to start a new group for your team.

<p class="mb-8"><b>Alert with title</b></p>
<div class="alert alert-success" role="alert">
	<p><strong>Alert title</strong></p>
	<p>You've confirmed [email protected]. You're all ready to start a new group for your team.</p>
</div>

Link

We include the ability to add a link within an alert message because an alert by itself is often just the start of a conversation. The link transforms the alert from a passive notification into an actionable next step.

Example
HTML

Alert with link

Alert title

You've confirmed [email protected]. You're all ready to start a new group for your team.

Link

<p class="mb-8"><b>Alert with link</b></p>
<div class="alert alert-success" role="alert">
	<p><strong>Alert title</strong></p>
	<p>You've confirmed [email protected]. You're all ready to start a new group for your team.</p>
	<a class="external-link" href="#">Link <span class="spirisicon spirisicon-sm spirisicon-external-link" aria-hidden="true"></span></a>
</div>

Dismiss

Alert notices can include a dismiss button that removes the notice from the page layout. This is helpful for general or supplemental information. The user needs to actively close the alert.

Build on any alert by adding an optional .alert-dismissible and close button.

Example
HTML

Warning! Are you sure you want to do this?

You are trying to do something useful, for this you require a proper computer, a mouse with more than one button. Ask an adult to help you out with this.

<div class="alert alert-warning alert-dismissible" role="alert">
	<button type="button" class="close" data-dismiss="alert" aria-label="Close">Close</button>
	<h2>Warning! Are you sure you want to do this?</h2>
	<p>You are trying to do something useful, for this you require a proper computer, a mouse with more than one button. Ask an adult to help you out with this. </p>
	<p class="d-flex gap-8">
		<button type="button" class="btn btn-primary">Take this action</button>
		<button type="button" class="btn">Or do this</button>
	</p>
</div>

Close icon

The decision to hide the close icon should be deliberate and reserved only for alerts that represent a mandatory acknowledgement or a system-controlled status change. If the user can ignore the message, they must be given the option to dismiss it.

Example
HTML

Warning!

Better check yourself, you're not looking too good.

<div class="alert alert-warning alert-sm alert-dismissible" role="alert">
	<button type="button" class="close" data-dismiss="alert" aria-label="Close"></button>
	<p><strong>Warning!</strong></p>
	<p>Better check yourself, you're not looking too good.</p>
</div>

Max/min width

Having a defined max and min width for an alert is crucial for readability and visual consistency.

A minimum width ensures the alert's content isn't cramped and remains easy to read, whilst a maximum width prevents text lines from becoming too long, which can strain the user's eyes and make the message harder to scan.

Alerts have a minimum width of 300px and a maximum width of 800px.

Example
HTML

Max width max-width: 800px

Max width.

This alert will not grow beyond 800px, regardless of how much content you place inside it. Even with a very long message like this one, the alert container is capped at a maximum width of 800px to prevent text lines from becoming too long, which improves readability and keeps the layout visually consistent across wide screens and large viewports.

<p class="mb-8"><b>Max width</b> <code>max-width: 800px</code></p>
<div class="alert alert-info" role="alert">
	<p><strong>Max width.</strong></p>
	<p>This alert will not grow beyond 800px, regardless of how much content you place inside it. Even with a very long message like this one, the alert container is capped at a maximum width of 800px to prevent text lines from becoming too long, which improves readability and keeps the layout visually consistent across wide screens and large viewports.</p>
</div>

Example
HTML

Min width min-width: 300px

Short text.

Usage

Placing alerts in the top middle of the screen is a best practice in a design system for visibility and user focus. This position is a prime location that ensures the message is seen without being overly intrusive.

Accessibility

Keyboard interaction

All interactive elements within an alert should be reachable via TAB and SHIFT+TAB keys.

Always use role="alert" on alert containers to announce the alert to screen readers. Close buttons must include aria-label="Close" for screen reader users.

Add tabindex="0" to make alerts focusable via keyboard. A focus outline is displayed when the alert receives focus.

Example
HTML

Focusable alert tabindex="0"

Alert title

You've confirmed [email protected]. You're all ready to start a new group for.

<p class="mb-8"><b>Focusable alert</b> <code>tabindex="0"</code></p>
<div class="alert alert-success" role="alert" tabindex="0">
	<p><strong>Alert title</strong></p>
	<p>You've confirmed [email protected]. You're all ready to start a new group for.</p>
</div>

Best practices

One alert at a time

Show only one alert at a time. Once a user dismisses or addresses it, replace it with the next most important notice.

Avoid stacking alerts — they can quickly become overwhelming.

Sizing

Small alert

Fancy small alerts? Add .alert-sm for the small version.

Example
HTML

Success .alert-success.alert-sm

Well done!

You successfully read this important alert message.

<p class="mb-8"><b>Success</b> <code>.alert-success.alert-sm</code></p>
<div role="alert" class="alert alert-success alert-sm">
	<p><strong>Well done!</strong></p>
	<p>You successfully read this important alert message.</p>
</div>

Example
HTML

Info .alert-info.alert-sm

Heads up!

This alert needs your attention, but it's not super important.

<p class="mb-8"><b>Info</b> <code>.alert-info.alert-sm</code></p>
<div role="alert" class="alert alert-info alert-sm">
	<p><strong>Heads up!</strong></p>
	<p>This alert needs your attention, but it's not super important.</p>
</div>

Example
HTML

Warning .alert-warning.alert-sm

Warning!

Better check yourself, you're not looking too good.

<p class="mb-8"><b>Warning</b> <code>.alert-warning.alert-sm</code></p>
<div class="alert alert-warning alert-sm" role="alert">
	<p><strong>Warning!</strong></p>
	<p>Better check yourself, you're not looking too good.</p>
</div>

Example
HTML

Danger .alert-danger.alert-sm

Oh snap!

Change a few things up and try submitting again.

<p class="mb-8"><b>Danger</b> <code>.alert-danger.alert-sm</code></p>
<div role="alert" class="alert alert-danger alert-sm">
	<p><strong>Oh snap!</strong></p>
	<p>Change a few things up and try submitting again.</p>
</div>

Medium icons

Deprecated in v2.3

.alert-icon-md will be removed in v3.0. Use the default .alert class instead.

For a medium icon size add .alert-icon-md to the alert main wrapper.

Example
HTML

Success .alert-success.alert-icon-md

Well done!

You successfully read this important alert message. Alerts are available for any length of text, as well as an optional dismiss button.

Use visual hierarchy to arrange the text elements to show their order of importance.

<p class="mb-8"><b>Success</b> <code>.alert-success.alert-icon-md</code></p>
<div role="alert" class="alert alert-icon-md alert-success">
	<p><strong>Well done!</strong></p>
	<p>You successfully read this important alert message. Alerts are available for any length of text, as well as an optional dismiss button.</p>
	<p>Use visual hierarchy to arrange the text elements to show their order of importance.</p>
</div>

Example
HTML

Info .alert-info.alert-icon-md

Heads up!

This alert needs your attention, but it's not super important. Alerts are available for any length of text, as well as an optional dismiss button.

Use visual hierarchy to arrange the text elements to show their order of importance.

<p class="mb-8"><b>Info</b> <code>.alert-info.alert-icon-md</code></p>
<div role="alert" class="alert alert-icon-md alert-info">
	<p><strong>Heads up!</strong></p>
	<p>This alert needs your attention, but it's not super important. Alerts are available for any length of text, as well as an optional dismiss button.</p>
	<p>Use visual hierarchy to arrange the text elements to show their order of importance.</p>
</div>

Example
HTML

Warning .alert-warning.alert-icon-md

Warning!

Better check yourself, you're not looking too good. Alerts are available for any length of text, as well as an optional dismiss button.

Use visual hierarchy to arrange the text elements to show their order of importance.

<p class="mb-8"><b>Warning</b> <code>.alert-warning.alert-icon-md</code></p>
<div role="alert" class="alert alert-icon-md alert-warning">
	<p><strong>Warning!</strong></p>
	<p>Better check yourself, you're not looking too good. Alerts are available for any length of text, as well as an optional dismiss button.</p>
	<p>Use visual hierarchy to arrange the text elements to show their order of importance.</p>
</div>

Example
HTML

Danger .alert-danger.alert-icon-md

Oh snap!

Change a few things up and try submitting again. Alerts are available for any length of text, as well as an optional dismiss button.

Use visual hierarchy to arrange the text elements to show their order of importance.

<p class="mb-8"><b>Danger</b> <code>.alert-danger.alert-icon-md</code></p>
<div role="alert" class="alert alert-icon-md alert-danger">
	<p><strong>Oh snap!</strong></p>
	<p>Change a few things up and try submitting again. Alerts are available for any length of text, as well as an optional dismiss button.</p>
	<p>Use visual hierarchy to arrange the text elements to show their order of importance.</p>
</div>

Large icons

Deprecated in v2.3

.alert-icon-lg will be removed in v3.0. Use the default .alert class instead.

For a large icon size add .alert-icon-lg to the alert main wrapper.

Example
HTML

Success .alert-success.alert-icon-lg

Well done!

You successfully read this important alert message. Alerts are available for any length of text, as well as an optional dismiss button.

Use visual hierarchy to arrange the text elements to show their order of importance.

<p class="mb-8"><b>Success</b> <code>.alert-success.alert-icon-lg</code></p>
<div role="alert" class="alert alert-icon-lg alert-success">
	<p><strong>Well done!</strong></p>
	<p>You successfully read this important alert message. Alerts are available for any length of text, as well as an optional dismiss button.</p>
	<p>Use visual hierarchy to arrange the text elements to show their order of importance.</p>
</div>

Example
HTML

Info .alert-info.alert-icon-lg

Heads up!

This alert needs your attention, but it's not super important. Alerts are available for any length of text, as well as an optional dismiss button.

Use visual hierarchy to arrange the text elements to show their order of importance.

<p class="mb-8"><b>Info</b> <code>.alert-info.alert-icon-lg</code></p>
<div role="alert" class="alert alert-icon-lg alert-info">
	<p><strong>Heads up!</strong></p>
	<p>This alert needs your attention, but it's not super important. Alerts are available for any length of text, as well as an optional dismiss button.</p>
	<p>Use visual hierarchy to arrange the text elements to show their order of importance.</p>
</div>

Example
HTML

Warning .alert-warning.alert-icon-lg

Warning!

Better check yourself, you're not looking too good. Alerts are available for any length of text, as well as an optional dismiss button.

Use visual hierarchy to arrange the text elements to show their order of importance.

<p class="mb-8"><b>Warning</b> <code>.alert-warning.alert-icon-lg</code></p>
<div role="alert" class="alert alert-icon-lg alert-warning">
	<p><strong>Warning!</strong></p>
	<p>Better check yourself, you're not looking too good. Alerts are available for any length of text, as well as an optional dismiss button.</p>
	<p>Use visual hierarchy to arrange the text elements to show their order of importance.</p>
</div>

Example
HTML

Danger .alert-danger.alert-icon-lg

Oh snap!

Change a few things up and try submitting again. Alerts are available for any length of text, as well as an optional dismiss button.

Use visual hierarchy to arrange the text elements to show their order of importance.

<p class="mb-8"><b>Danger</b> <code>.alert-danger.alert-icon-lg</code></p>
<div role="alert" class="alert alert-icon-lg alert-danger">
	<p><strong>Oh snap!</strong></p>
	<p>Change a few things up and try submitting again. Alerts are available for any length of text, as well as an optional dismiss button.</p>
	<p>Use visual hierarchy to arrange the text elements to show their order of importance.</p>
</div>