Skip to main content

Internal review app NHS.UK frontend

Use design system guidance and examples to build consistent, accessible NHS services for the public and staff.

Deployed automatically from main branch (opens in new tab).

Tag

These examples are used for automated tests and may not follow service manual best practice.

Tag default

Open this example in a new tab: Tag default

Active
Code

Markup

<strong class="nhsuk-tag">
  Active
</strong>

Macro

{% from "tag/macro.njk" import tag -%}

{{ tag({
  text: "Active"
}) }}

Tag white default

Open this example in a new tab: Tag white default

In progress
Code

Markup

<strong class="nhsuk-tag nhsuk-tag--white">
  In progress
</strong>

Macro

{% from "tag/macro.njk" import tag -%}

{{ tag({
  text: "In progress",
  colour: "white"
}) }}

Tag grey default

Open this example in a new tab: Tag grey default

Inactive
Code

Markup

<strong class="nhsuk-tag nhsuk-tag--grey">
  Inactive
</strong>

Macro

{% from "tag/macro.njk" import tag -%}

{{ tag({
  text: "Inactive",
  colour: "grey"
}) }}

Tag green default

Open this example in a new tab: Tag green default

New
Code

Markup

<strong class="nhsuk-tag nhsuk-tag--green">
  New
</strong>

Macro

{% from "tag/macro.njk" import tag -%}

{{ tag({
  text: "New",
  colour: "green"
}) }}

Tag aqua-green default

Open this example in a new tab: Tag aqua-green default

Active
Code

Markup

<strong class="nhsuk-tag nhsuk-tag--aqua-green">
  Active
</strong>

Macro

{% from "tag/macro.njk" import tag -%}

{{ tag({
  text: "Active",
  colour: "aqua-green"
}) }}

Tag blue default

Open this example in a new tab: Tag blue default

Pending
Code

Markup

<strong class="nhsuk-tag nhsuk-tag--blue">
  Pending
</strong>

Macro

{% from "tag/macro.njk" import tag -%}

{{ tag({
  text: "Pending",
  colour: "blue"
}) }}

Tag purple default

Open this example in a new tab: Tag purple default

Received
Code

Markup

<strong class="nhsuk-tag nhsuk-tag--purple">
  Received
</strong>

Macro

{% from "tag/macro.njk" import tag -%}

{{ tag({
  text: "Received",
  colour: "purple"
}) }}

Tag pink default

Open this example in a new tab: Tag pink default

Sent
Code

Markup

<strong class="nhsuk-tag nhsuk-tag--pink">
  Sent
</strong>

Macro

{% from "tag/macro.njk" import tag -%}

{{ tag({
  text: "Sent",
  colour: "pink"
}) }}

Tag red default

Open this example in a new tab: Tag red default

Rejected
Code

Markup

<strong class="nhsuk-tag nhsuk-tag--red">
  Rejected
</strong>

Macro

{% from "tag/macro.njk" import tag -%}

{{ tag({
  text: "Rejected",
  colour: "red"
}) }}

Tag orange default

Open this example in a new tab: Tag orange default

Declined
Code

Markup

<strong class="nhsuk-tag nhsuk-tag--orange">
  Declined
</strong>

Macro

{% from "tag/macro.njk" import tag -%}

{{ tag({
  text: "Declined",
  colour: "orange"
}) }}

Tag yellow default

Open this example in a new tab: Tag yellow default

Delayed
Code

Markup

<strong class="nhsuk-tag nhsuk-tag--yellow">
  Delayed
</strong>

Macro

{% from "tag/macro.njk" import tag -%}

{{ tag({
  text: "Delayed",
  colour: "yellow"
}) }}

Tag colour class

Open this example in a new tab: Tag colour class

Green
Code

Markup

<strong class="nhsuk-tag nhsuk-tag--green">
  Green
</strong>

Macro

{% from "tag/macro.njk" import tag -%}

{{ tag({
  text: "Green",
  classes: "nhsuk-tag--green"
}) }}

Tag colour class overriding colour option

Open this example in a new tab: Tag colour class overriding colour option

Not green
Code

Markup

<strong class="nhsuk-tag nhsuk-tag--red">
  Not green
</strong>

Macro

{% from "tag/macro.njk" import tag -%}

{{ tag({
  text: "Not green",
  colour: "green",
  classes: "nhsuk-tag--red"
}) }}

Tag with HTML

Open this example in a new tab: Tag with HTML

A&E
Code

Markup

<strong class="nhsuk-tag nhsuk-tag--red">
  A&amp;E
</strong>

Macro

{% from "tag/macro.njk" import tag -%}

{{ tag({
  html: "A&amp;E",
  colour: "red"
}) }}

Tag with HTML via call block

Open this example in a new tab: Tag with HTML via call block

A&E
Code

Markup

<strong class="nhsuk-tag nhsuk-tag--red">
A&amp;E
</strong>

Macro

{% from "tag/macro.njk" import tag -%}

{% call tag({
  colour: "red"
}) %}
A&amp;E
{%- endcall %}

Tag without border

Open this example in a new tab: Tag without border

Active
Code

Markup

<strong class="nhsuk-tag nhsuk-tag--no-border">
  Active
</strong>

Macro

{% from "tag/macro.njk" import tag -%}

{{ tag({
  border: false,
  text: "Active"
}) }}

Tag white without border

Open this example in a new tab: Tag white without border

In progress
Code

Markup

<strong class="nhsuk-tag nhsuk-tag--white nhsuk-tag--no-border">
  In progress
</strong>

Macro

{% from "tag/macro.njk" import tag -%}

{{ tag({
  border: false,
  text: "In progress",
  colour: "white"
}) }}

Tag grey without border

Open this example in a new tab: Tag grey without border

Inactive
Code

Markup

<strong class="nhsuk-tag nhsuk-tag--grey nhsuk-tag--no-border">
  Inactive
</strong>

Macro

{% from "tag/macro.njk" import tag -%}

{{ tag({
  border: false,
  text: "Inactive",
  colour: "grey"
}) }}

Tag green without border

Open this example in a new tab: Tag green without border

New
Code

Markup

<strong class="nhsuk-tag nhsuk-tag--green nhsuk-tag--no-border">
  New
</strong>

Macro

{% from "tag/macro.njk" import tag -%}

{{ tag({
  border: false,
  text: "New",
  colour: "green"
}) }}

Tag aqua-green without border

Open this example in a new tab: Tag aqua-green without border

Active
Code

Markup

<strong class="nhsuk-tag nhsuk-tag--aqua-green nhsuk-tag--no-border">
  Active
</strong>

Macro

{% from "tag/macro.njk" import tag -%}

{{ tag({
  border: false,
  text: "Active",
  colour: "aqua-green"
}) }}

Tag blue without border

Open this example in a new tab: Tag blue without border

Pending
Code

Markup

<strong class="nhsuk-tag nhsuk-tag--blue nhsuk-tag--no-border">
  Pending
</strong>

Macro

{% from "tag/macro.njk" import tag -%}

{{ tag({
  border: false,
  text: "Pending",
  colour: "blue"
}) }}

Tag purple without border

Open this example in a new tab: Tag purple without border

Received
Code

Markup

<strong class="nhsuk-tag nhsuk-tag--purple nhsuk-tag--no-border">
  Received
</strong>

Macro

{% from "tag/macro.njk" import tag -%}

{{ tag({
  border: false,
  text: "Received",
  colour: "purple"
}) }}

Tag pink without border

Open this example in a new tab: Tag pink without border

Sent
Code

Markup

<strong class="nhsuk-tag nhsuk-tag--pink nhsuk-tag--no-border">
  Sent
</strong>

Macro

{% from "tag/macro.njk" import tag -%}

{{ tag({
  border: false,
  text: "Sent",
  colour: "pink"
}) }}

Tag red without border

Open this example in a new tab: Tag red without border

Rejected
Code

Markup

<strong class="nhsuk-tag nhsuk-tag--red nhsuk-tag--no-border">
  Rejected
</strong>

Macro

{% from "tag/macro.njk" import tag -%}

{{ tag({
  border: false,
  text: "Rejected",
  colour: "red"
}) }}

Tag orange without border

Open this example in a new tab: Tag orange without border

Declined
Code

Markup

<strong class="nhsuk-tag nhsuk-tag--orange nhsuk-tag--no-border">
  Declined
</strong>

Macro

{% from "tag/macro.njk" import tag -%}

{{ tag({
  border: false,
  text: "Declined",
  colour: "orange"
}) }}

Tag yellow without border

Open this example in a new tab: Tag yellow without border

Delayed
Code

Markup

<strong class="nhsuk-tag nhsuk-tag--yellow nhsuk-tag--no-border">
  Delayed
</strong>

Macro

{% from "tag/macro.njk" import tag -%}

{{ tag({
  border: false,
  text: "Delayed",
  colour: "yellow"
}) }}

Tag without colour

Open this example in a new tab: Tag without colour

Completed
Code

Markup

<strong class="nhsuk-tag nhsuk-tag--no-colour">
  Completed
</strong>

Macro

{% from "tag/macro.njk" import tag -%}

{{ tag({
  text: "Completed",
  colour: false
}) }}

Tag with text escaping

Open this example in a new tab: Tag with text escaping

A&E
Code

Markup

<strong class="nhsuk-tag nhsuk-tag--red">
  A&amp;E
</strong>

Macro

{% from "tag/macro.njk" import tag -%}

{{ tag({
  text: "A&E",
  colour: "red"
}) }}