Components

Status message

Tell users that something has changed.

On hold

<div class="hods-status-message"><p>On hold</p></div>
<StatusMessage status="On hold" />
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 - REQUIRED. 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

Status messages are similar to 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.

How it works

Standard status message with an action

On hold - due for review 31 May 2021

<div class="hods-status-message">
  <p>
    On hold
    <span class="hods-status-message__extra">
      - due for review 31 May 2021
    </span>
  </p>
  <ul class="hods-status-message__actions">
    <li
      class="
        hods-status-message__actions__item
        hods-status-message__actions__item--active
      "
    >
      <a
        aria-current="page"
        class="
          hods-status-message__actions__link
          active
        "
        href="/"
      >
        Review
      </a>
    </li>
  </ul>
</div>
<StatusMessage
  status="On hold"
  actions={[
    {
      href: "#",
      text: "Review",
    },
  ]}
>
  - due for review 31 May 2021
</StatusMessage>

Status message with multiple actions

On hold - due for review 31 May 2021

<div class="hods-status-message">
  <p>
    On hold
    <span class="hods-status-message__extra">
      - due for review 31 May 2021
    </span>
  </p>
  <ul class="hods-status-message__actions">
    <li
      class="
        hods-status-message__actions__item
        hods-status-message__actions__item--active
      "
    >
      <a
        aria-current="page"
        class="
          hods-status-message__actions__link
          active
        "
        href="/"
      >
        Review
      </a>
    </li>
    <li
      class="
        hods-status-message__actions__item
        hods-status-message__actions__item--active
      "
    >
      <a
        aria-current="page"
        class="
          hods-status-message__actions__link
          active
        "
        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>

Services using this component

  • Returns and movement
  • Passport renewals
  • Passport application search

Research

If your service uses this component, let us know of any insights you have on research.

Accessibility

If your service uses this component, let us know of any insights you have on accessibility considerations.