Tag

Use tags to show a status. Tags only display information and are not interactive.

Open this example (Tag) in a new window 
<table class="nhsuk-table">
  <thead class="nhsuk-table__head">
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="col">Class name</th>
      <th class="nhsuk-table__header" scope="col">Tag</th>
    </tr>
  </thead>
  <tbody class="nhsuk-table__body">
    <tr class="nhsuk-table__row">
      <td class="nhsuk-table__cell">
        <code> nhsapp-tag--white </code>
      </td>
      <td class="nhsuk-table__cell">
        <span class="nhsapp-tag nhsapp-tag--white">Started</span>
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <td class="nhsuk-table__cell">
        <code> nhsapp-tag--grey </code>
      </td>
      <td class="nhsuk-table__cell">
        <span class="nhsapp-tag nhsapp-tag--grey">Not started</span>
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <td class="nhsuk-table__cell">
        <code> nhsapp-tag--green </code>
      </td>
      <td class="nhsuk-table__cell">
        <span class="nhsapp-tag nhsapp-tag--green">New</span>
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <td class="nhsuk-table__cell">
        <code> nhsapp-tag--aqua-green </code>
      </td>
      <td class="nhsuk-table__cell">
        <span class="nhsapp-tag nhsapp-tag--aqua-green">Active</span>
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <td class="nhsuk-table__cell">
        <code> nhsapp-tag--blue </code>
      </td>
      <td class="nhsuk-table__cell">
        <span class="nhsapp-tag nhsapp-tag--blue">Pending</span>
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <td class="nhsuk-table__cell">
        <code> nhsapp-tag--purple </code>
      </td>
      <td class="nhsuk-table__cell">
        <span class="nhsapp-tag nhsapp-tag--purple">Received</span>
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <td class="nhsuk-table__cell">
        <code> nhsapp-tag--pink </code>
      </td>
      <td class="nhsuk-table__cell">
        <span class="nhsapp-tag nhsapp-tag--pink">Sent</span>
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <td class="nhsuk-table__cell">
        <code> nhsapp-tag--red </code>
      </td>
      <td class="nhsuk-table__cell">
        <span class="nhsapp-tag nhsapp-tag--red">Rejected</span>
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <td class="nhsuk-table__cell">
        <code> nhsapp-tag--orange </code>
      </td>
      <td class="nhsuk-table__cell">
        <span class="nhsapp-tag nhsapp-tag--orange">Declined</span>
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <td class="nhsuk-table__cell">
        <code> nhsapp-tag--yellow </code>
      </td>
      <td class="nhsuk-table__cell">
        <span class="nhsapp-tag nhsapp-tag--yellow">Delayed</span>
      </td>
    </tr>
  </tbody>
</table>

{% from "nhsapp/components/tag/macro.njk" import nhsappTag %}

<table class="nhsuk-table">
  <thead class="nhsuk-table__head">
    <tr class="nhsuk-table__row">
      <th class="nhsuk-table__header" scope="col"> Class name </th>
      <th class="nhsuk-table__header" scope="col"> Tag </th>
    </tr>
  </thead>
  <tbody class="nhsuk-table__body">
    <tr class="nhsuk-table__row">
      <td class="nhsuk-table__cell">
        <code> nhsapp-tag--white </code>
      </td>
      <td class="nhsuk-table__cell">
        {{ nhsappTag({
          text: "Started",
          classes: "nhsapp-tag--white"
        })}}
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <td class="nhsuk-table__cell">
        <code> nhsapp-tag--grey </code>
      </td>
      <td class="nhsuk-table__cell">
        {{ nhsappTag({
          text: "Not started",
          classes: "nhsapp-tag--grey"
        })}}
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <td class="nhsuk-table__cell">
        <code> nhsapp-tag--green </code>
      </td>
      <td class="nhsuk-table__cell">
        {{ nhsappTag({
          text: "New",
          classes: "nhsapp-tag--green"
        })}}
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <td class="nhsuk-table__cell">
        <code> nhsapp-tag--aqua-green </code>
      </td>
      <td class="nhsuk-table__cell">
        {{ nhsappTag({
          text: "Active",
          classes: "nhsapp-tag--aqua-green"
        })}}
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <td class="nhsuk-table__cell">
        <code> nhsapp-tag--blue </code>
      </td>
      <td class="nhsuk-table__cell">
        {{ nhsappTag({
          text: "Pending",
          classes: "nhsapp-tag--blue"
        })}}
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <td class="nhsuk-table__cell">
        <code> nhsapp-tag--purple </code>
      </td>
      <td class="nhsuk-table__cell">
        {{ nhsappTag({
          text: "Received",
          classes: "nhsapp-tag--purple"
        })}}
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <td class="nhsuk-table__cell">
        <code> nhsapp-tag--pink </code>
      </td>
      <td class="nhsuk-table__cell">
        {{ nhsappTag({
          text: "Sent",
          classes: "nhsapp-tag--pink"
        })}}
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <td class="nhsuk-table__cell">
        <code> nhsapp-tag--red </code>
      </td>
      <td class="nhsuk-table__cell">
        {{ nhsappTag({
          text: "Rejected",
          classes: "nhsapp-tag--red"
        })}}
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <td class="nhsuk-table__cell">
        <code> nhsapp-tag--orange </code>
      </td>
      <td class="nhsuk-table__cell">
        {{ nhsappTag({
          text: "Declined",
          classes: "nhsapp-tag--orange"
        })}}
      </td>
    </tr>
    <tr class="nhsuk-table__row">
      <td class="nhsuk-table__cell">
        <code> nhsapp-tag--yellow </code>
      </td>
      <td class="nhsuk-table__cell">
        {{ nhsappTag({
          text: "Delayed",
          classes: "nhsapp-tag--yellow"
        })}}
      </td>
    </tr>
  </tbody>
</table>

To use the component in your design, add the NHS App Figma library to your working files, and navigate using the components tab.

View component in Figma

To use the component in your Vue application, install the NHS App Vue Component Library and import the component.

View component in Vue

When to use

Use tags to help users:

  • understand the status of an activity or a process
  • keep track of progress
  • understand when they need to take an action

For example, tags can help users to:

  • track prescription requests
  • understand when they need to take an action regarding a hospital referral

When not to use

Too many tags, and lots of variation in tag colours, may clutter a page and overwhelm users. Tags can also affect the visual hierarchy of a page. This means tags should be used sparingly.

How to use

Tags can be placed within a card or outside of one. Inside a card, tags should always be left-aligned. Outside a card, tags can be aligned to the left or the right.

Tag text should:

  • be in sentence case
  • describe status in as few words as possible

How not to use

Do not use tags:

  • as a header or grouping-class for elements or information
  • as a selectable element

Tag text should not:

  • be in bold
  • start with a verb – users may think they can select the tag

Accessibility

Tag colours meet WCAG 2.2 Success Criterion 1.4.3 Contrast (Minimum) AAA.

Research

In our research, we found that red tags could cause some participants to feel concerned. Red was associated with something having gone wrong.

Help improve this component

If you have used or researched this component, please let us know what you found so we can make it better for everyone.

Discuss 'Tag' on GitHub where you can share anything you think might be useful.

You can also share feedback with us on Slack.