Alerts
Alerts communicate information related to the current task. They use Bootstrap’s .alert API and
the design system’s semantic status colours.
Before you start
You will need a recent energy bill to complete this form.
Your changes have been saved.
Check your answers. Your estimate may change if information is missing.
We could not save your changes. Try again.
<div class="alert alert-info" role="status">
<h2 class="alert-heading">Before you start</h2>
<p class="mb-0">You will need a recent energy bill to complete this form.</p>
</div>
Choosing a status
- Information provides relevant context without requiring immediate action.
- Success confirms that an important action completed.
- Warning highlights a consequence or something the user should check.
- Danger reports a failure or serious problem.
Do not use an alert merely to make ordinary content more prominent. Use role="alert" only when a
new urgent message is inserted into the page; it causes assistive technology to interrupt the user.
Messages already present when the page loads do not usually need a live-region role.
Dismissible alerts are deferred. Important information should not disappear accidentally, and adding dismissal requires persistence and focus-management decisions beyond a close button.