Status message
Tell users that something has changed.
Props
| Name | Type | Default | Description |
|---|---|---|---|
| id | string | 'id' attribute to place on the base HTML element | |
| classBlock | string | Block name override in BEM style classes applied to all elements | |
| classModifiers | other | BEM style modifiers to apply to the base HTML element | |
| className | string | Extra classes to apply to the base HTML element | |
| status | string | Summary of status | |
| children | other | Extra information about the status | |
| actions | other | Links to perform status related actions |
When to use this component
Use status messages to:
- notify the user of a change
- tell the user something important
- inform the user that they need to do something
They are like alerts but are primarily used for internal services and can include actions for users to take. For less prominent status indicators you could use tags from the GOV.UK design system.
Limit to important information, or when it’s changed. Overuse risks the message getting lost.
How it works
Standard status message with an action
<div class="hods-status-message">
<div>
<div class="hods-status-message__status">
On hold
</div>
<p class="hods-status-message__extra">
Due for review 31 May 2021
</p>
</div>
<ul class="hods-status-message__actions">
<li
class="hods-status-message__actions__item hods-status-message__actions__item--active"
>
<a
class="hods-status-message__actions__link"
href="#"
>
Review
</a>
</li>
</ul>
</div>
<StatusMessage
status="On hold"
actions={[
{
href: "#",
text: "Review",
},
]}
>
Due for review 31 May 2021
</StatusMessage>
Status message without an action
Status message with multiple actions
<div class="hods-status-message">
<div>
<div class="hods-status-message__status">
On hold
</div>
<p class="hods-status-message__extra">
Due for review 31 May 2021
</p>
</div>
<ul class="hods-status-message__actions">
<li
class="hods-status-message__actions__item hods-status-message__actions__item--active"
>
<a
class="hods-status-message__actions__link"
href="#"
>
Review
</a>
</li>
<li
class="hods-status-message__actions__item hods-status-message__actions__item--active"
>
<a
class="hods-status-message__actions__link"
href="#"
>
Extend hold
</a>
</li>
</ul>
</div>
<StatusMessage
status="On hold"
actions={[
{
href: "#",
text: "Review",
},
{
href: "#",
text: "Extend hold",
},
]}
>
Due for review 31 May 2021
</StatusMessage>
Status message with multiple actions (no extra content)
<div class="hods-status-message">
<div>
<div class="hods-status-message__status">
On hold
</div>
</div>
<ul class="hods-status-message__actions">
<li
class="hods-status-message__actions__item hods-status-message__actions__item--active"
>
<a
class="hods-status-message__actions__link"
href="#"
>
Review
</a>
</li>
<li
class="hods-status-message__actions__item hods-status-message__actions__item--active"
>
<a
class="hods-status-message__actions__link"
href="#"
>
Extend hold
</a>
</li>
</ul>
</div>
<StatusMessage
status="On hold"
actions={[
{
href: "#",
text: "Review",
},
{
href: "#",
text: "Extend hold",
},
]}
></StatusMessage>
Writing for this component
The status message should be as concise as possible and relate to the whole page. The bold part and button should be short, 1 or 2 words.
Any buttons should be verbs.
If text in the middle is necessary, then ideally one line. It does not need to be in full sentences and does not need to end in a full stop. It should be plain text with no formatting.
Do not use links, they do not contrast well with the background, use buttons instead.
If it’s about people, make sure your content is dynamic and personalised. Use ‘person’ when it’s about one person and ‘people’ for more than one and include names if you can.
Accessibility
All users benefit from clear, visible notification messages which are presented in a consistent, predictable way. See the notifications guidance for more information
Research
The status message is used by:
- Returns and movement
- Passport renewals
- Passport application search
- a service used by staff to assess risk at the border
- an internal service to manage appointments
For a service to assess border risk, this was used at the top of the screen to:
- show who owns the case
- show if the case is read only
- allow users to take over the case
<div class="hods-status-message">
<div>
<div class="hods-status-message__status">
Read only
</div>
<p class="hods-status-message__extra">
Liam Davies is working on these results
<br />
Last active: 5 minutes ago
</p>
</div>
<ul class="hods-status-message__actions">
<li
class="hods-status-message__actions__item hods-status-message__actions__item--active"
>
<a
class="hods-status-message__actions__link"
href="#"
>
Take over
</a>
</li>
</ul>
</div>
<StatusMessage
status="Read only"
actions={[
{
href: "#",
text: "Take over",
},
]}
>
Liam Davies is working on these results
<br />
Last active: 5 minutes ago
</StatusMessage>
Research with 6 users showed that users understood the message and how to interact with it.
Help improve this component
This component needs improving. We need evidence about:
- when to use an alert, expandable banner or status message
To contribute, add your thoughts and research findings to our GitHub discussion, or follow our contribute guidance.