Tag

A component to display the status of something.

example

HTML
React

<strong class="govuk-tag">example</strong>

<Tag>example</Tag>

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
text	string	-	Text to be displayed within the tag

When to use this component

Use the tag component when it’s possible for something to have more than one status and it’s useful for the user to know about that status. For example, you can use a tag to show whether an item in a [task list] has been ‘completed’.

How it works

Tags are just used to indicate a status, so do not add links. Use adjectives rather than verbs for the names of your tags. Using a verb might make a user think that clicking on them will do something.

Stories

Standard

A standard Tag.

example

HTML
React

<strong class="govuk-tag">example</strong>

<Tag>example</Tag>

Showing one or two statuses

Sometimes a single status is enough. For example if you need to tell users which parts of an application they’ve finished and which they haven’t, you may only need a ‘Completed’ tag. Because the user understands that if something doesn’t have a tag, that means it’s incomplete.

The [task list pattern] has an example of how to show one status using tags.

Or it can make sense to have two statuses. For example you may find that there’s a need to have one tag for ‘Active’ users and one for ‘Inactive’ users.

Name of user	Status
Rachel Silver	inactive
Jesse Smith	inactive
Joshua Wessel	active
Rachel Pepper	active
Stuart Say	inactive
Laura Frith	active
Tim Harvey	inactive

HTML
React

<table class="govuk-table">
  <thead class="govuk-table__head">
    <tr class="govuk-table__row">
      <th scope="col" class="govuk-table__header">
        Name of user
      </th>
      <th scope="col" class="govuk-table__header">
        Status
      </th>
    </tr>
  </thead>
  <tbody class="govuk-table__body">
    <tr class="govuk-table__row">
      <th scope="row" class="govuk-table__header">
        Rachel Silver
      </th>
      <td class="govuk-table__cell">
        <strong class="govuk-tag govuk-tag--grey">
          inactive
        </strong>
      </td>
    </tr>
    <tr class="govuk-table__row">
      <th scope="row" class="govuk-table__header">
        Jesse Smith
      </th>
      <td class="govuk-table__cell">
        <strong class="govuk-tag govuk-tag--grey">
          inactive
        </strong>
      </td>
    </tr>
    <tr class="govuk-table__row">
      <th scope="row" class="govuk-table__header">
        Joshua Wessel
      </th>
      <td class="govuk-table__cell">
        <strong class="govuk-tag">active</strong>
      </td>
    </tr>
    <tr class="govuk-table__row">
      <th scope="row" class="govuk-table__header">
        Rachel Pepper
      </th>
      <td class="govuk-table__cell">
        <strong class="govuk-tag">active</strong>
      </td>
    </tr>
    <tr class="govuk-table__row">
      <th scope="row" class="govuk-table__header">
        Stuart Say
      </th>
      <td class="govuk-table__cell">
        <strong class="govuk-tag govuk-tag--grey">
          inactive
        </strong>
      </td>
    </tr>
    <tr class="govuk-table__row">
      <th scope="row" class="govuk-table__header">
        Laura Frith
      </th>
      <td class="govuk-table__cell">
        <strong class="govuk-tag">active</strong>
      </td>
    </tr>
    <tr class="govuk-table__row">
      <th scope="row" class="govuk-table__header">
        Tim Harvey
      </th>
      <td class="govuk-table__cell">
        <strong class="govuk-tag govuk-tag--grey">
          inactive
        </strong>
      </td>
    </tr>
  </tbody>
</table>

<Table
  keys={["name", "status"]}
  headings={{
    name: "Name of user",
    status: "Status",
  }}
  data={[
    {
      name: "Rachel Silver",
      status: (
        <Tag classModifiers="grey">inactive</Tag>
      ),
    },
    {
      name: "Jesse Smith",
      status: (
        <Tag classModifiers="grey">inactive</Tag>
      ),
    },
    {
      name: "Joshua Wessel",
      status: <Tag>active</Tag>,
    },
    {
      name: "Rachel Pepper",
      status: <Tag>active</Tag>,
    },
    {
      name: "Stuart Say",
      status: (
        <Tag classModifiers="grey">inactive</Tag>
      ),
    },
    {
      name: "Laura Frith",
      status: <Tag>active</Tag>,
    },
    {
      name: "Tim Harvey",
      status: (
        <Tag classModifiers="grey">inactive</Tag>
      ),
    },
  ]}
/>

Showing multiple statuses

Tags should be helpful to users. The more you add, the harder it is for users to remember them. So start with the smallest number of statuses you think might work, then add more if your user research shows there’s a need for them.

Applicaton	Status
Joshua Wessel	urgent
Rachel Silver	new
Laura Frith	new
Paul French	new
Jesse Smith	new
Rachel Pepper	finished
Emma Tennant	waiting on

HTML
React

<table class="govuk-table">
  <thead class="govuk-table__head">
    <tr class="govuk-table__row">
      <th scope="col" class="govuk-table__header">
        Applicaton
      </th>
      <th scope="col" class="govuk-table__header">
        Status
      </th>
    </tr>
  </thead>
  <tbody class="govuk-table__body">
    <tr class="govuk-table__row">
      <th scope="row" class="govuk-table__header">
        Joshua Wessel
      </th>
      <td class="govuk-table__cell">
        <strong class="govuk-tag govuk-tag--red">
          urgent
        </strong>
      </td>
    </tr>
    <tr class="govuk-table__row">
      <th scope="row" class="govuk-table__header">
        Rachel Silver
      </th>
      <td class="govuk-table__cell">
        <strong class="govuk-tag govuk-tag--blue">
          new
        </strong>
      </td>
    </tr>
    <tr class="govuk-table__row">
      <th scope="row" class="govuk-table__header">
        Laura Frith
      </th>
      <td class="govuk-table__cell">
        <strong class="govuk-tag govuk-tag--blue">
          new
        </strong>
      </td>
    </tr>
    <tr class="govuk-table__row">
      <th scope="row" class="govuk-table__header">
        Paul French
      </th>
      <td class="govuk-table__cell">
        <strong class="govuk-tag govuk-tag--blue">
          new
        </strong>
      </td>
    </tr>
    <tr class="govuk-table__row">
      <th scope="row" class="govuk-table__header">
        Jesse Smith
      </th>
      <td class="govuk-table__cell">
        <strong class="govuk-tag govuk-tag--blue">
          new
        </strong>
      </td>
    </tr>
    <tr class="govuk-table__row">
      <th scope="row" class="govuk-table__header">
        Rachel Pepper
      </th>
      <td class="govuk-table__cell">
        <strong class="govuk-tag govuk-tag--green">
          finished
        </strong>
      </td>
    </tr>
    <tr class="govuk-table__row">
      <th scope="row" class="govuk-table__header">
        Emma Tennant
      </th>
      <td class="govuk-table__cell">
        <strong class="govuk-tag govuk-tag--yellow">
          waiting on
        </strong>
      </td>
    </tr>
  </tbody>
</table>

<Table
  keys={["name", "status"]}
  headings={{
    name: "Applicaton",
    status: "Status",
  }}
  data={[
    {
      name: "Joshua Wessel",
      status: <Tag classModifiers="red">urgent</Tag>,
    },
    {
      name: "Rachel Silver",
      status: <Tag classModifiers="blue">new</Tag>,
    },
    {
      name: "Laura Frith",
      status: <Tag classModifiers="blue">new</Tag>,
    },
    {
      name: "Paul French",
      status: <Tag classModifiers="blue">new</Tag>,
    },
    {
      name: "Jesse Smith",
      status: <Tag classModifiers="blue">new</Tag>,
    },
    {
      name: "Rachel Pepper",
      status: (
        <Tag classModifiers="green">finished</Tag>
      ),
    },
    {
      name: "Emma Tennant",
      status: (
        <Tag classModifiers="yellow">waiting on</Tag>
      ),
    },
  ]}
/>

Using colour with tags

You can use colour to help distinguish between different tags – or to help draw the user’s attention to a tag if it’s especially important. For example, it probably makes sense to use red for a tag that reads ‘Urgent’.

Do not use colour alone to convey information because it’s not accessible. If you use the same tag in more than one place, make sure you keep the colour consistent.

Because tags with solid colours tend to stand out more, it’s usually best to avoid mixing solid colours and tints: use one or the other. This matters less if you’re only using two colours. For example, it’s okay to use the tint grey and solid blue tags together if you only need two statuses.

Additional colours

If you need more tag colours, you can use the following tints.

classModifier	Tag
`grey`	inactive
`green`	new
`turquoise`	active
`blue`	pending
`purple`	received
`pink`	sent
`red`	rejected
`orange`	declined
`yellow`	delayed

HTML
React

<table class="govuk-table">
  <thead class="govuk-table__head">
    <tr class="govuk-table__row">
      <th scope="col" class="govuk-table__header">
        classModifier
      </th>
      <th scope="col" class="govuk-table__header">
        Tag
      </th>
    </tr>
  </thead>
  <tbody class="govuk-table__body">
    <tr class="govuk-table__row">
      <th scope="row" class="govuk-table__header">
        <code>grey</code>
      </th>
      <td class="govuk-table__cell">
        <strong class="govuk-tag govuk-tag--grey">
          inactive
        </strong>
      </td>
    </tr>
    <tr class="govuk-table__row">
      <th scope="row" class="govuk-table__header">
        <code>green</code>
      </th>
      <td class="govuk-table__cell">
        <strong class="govuk-tag govuk-tag--green">
          new
        </strong>
      </td>
    </tr>
    <tr class="govuk-table__row">
      <th scope="row" class="govuk-table__header">
        <code>turquoise</code>
      </th>
      <td class="govuk-table__cell">
        <strong
          class="govuk-tag govuk-tag--turquoise"
        >
          active
        </strong>
      </td>
    </tr>
    <tr class="govuk-table__row">
      <th scope="row" class="govuk-table__header">
        <code>blue</code>
      </th>
      <td class="govuk-table__cell">
        <strong class="govuk-tag govuk-tag--blue">
          pending
        </strong>
      </td>
    </tr>
    <tr class="govuk-table__row">
      <th scope="row" class="govuk-table__header">
        <code>purple</code>
      </th>
      <td class="govuk-table__cell">
        <strong class="govuk-tag govuk-tag--purple">
          received
        </strong>
      </td>
    </tr>
    <tr class="govuk-table__row">
      <th scope="row" class="govuk-table__header">
        <code>pink</code>
      </th>
      <td class="govuk-table__cell">
        <strong class="govuk-tag govuk-tag--pink">
          sent
        </strong>
      </td>
    </tr>
    <tr class="govuk-table__row">
      <th scope="row" class="govuk-table__header">
        <code>red</code>
      </th>
      <td class="govuk-table__cell">
        <strong class="govuk-tag govuk-tag--red">
          rejected
        </strong>
      </td>
    </tr>
    <tr class="govuk-table__row">
      <th scope="row" class="govuk-table__header">
        <code>orange</code>
      </th>
      <td class="govuk-table__cell">
        <strong class="govuk-tag govuk-tag--orange">
          declined
        </strong>
      </td>
    </tr>
    <tr class="govuk-table__row">
      <th scope="row" class="govuk-table__header">
        <code>yellow</code>
      </th>
      <td class="govuk-table__cell">
        <strong class="govuk-tag govuk-tag--yellow">
          delayed
        </strong>
      </td>
    </tr>
  </tbody>
</table>

<Table
  keys={["modifier", "result"]}
  headings={{
    modifier: "classModifier",
    result: "Tag",
  }}
  data={[
    {
      modifier: <code>grey</code>,
      result: (
        <Tag classModifiers="grey">inactive</Tag>
      ),
    },
    {
      modifier: <code>green</code>,
      result: <Tag classModifiers="green">new</Tag>,
    },
    {
      modifier: <code>turquoise</code>,
      result: (
        <Tag classModifiers="turquoise">active</Tag>
      ),
    },
    {
      modifier: <code>blue</code>,
      result: (
        <Tag classModifiers="blue">pending</Tag>
      ),
    },
    {
      modifier: <code>purple</code>,
      result: (
        <Tag classModifiers="purple">received</Tag>
      ),
    },
    {
      modifier: <code>pink</code>,
      result: <Tag classModifiers="pink">sent</Tag>,
    },
    {
      modifier: <code>red</code>,
      result: (
        <Tag classModifiers="red">rejected</Tag>
      ),
    },
    {
      modifier: <code>orange</code>,
      result: (
        <Tag classModifiers="orange">declined</Tag>
      ),
    },
    {
      modifier: <code>yellow</code>,
      result: (
        <Tag classModifiers="yellow">delayed</Tag>
      ),
    },
  ]}
/>

Research on this component

The Department for Education contributed the coloured tags. They’re being used in:

apply for teacher training (used by citizens)
manage teacher training applications (used by teacher training providers)