ComponentTag

28 of 28 upstream examples match. Razor component: <NhsukTag>

Default

Matches upstream

Active

Razor Pages and MVC

<nhsuk-tag text="Active" />

Blazor

<NhsukTag Text="Active" />

Nunjucks (upstream)

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

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

Default

Matches upstream

white

Open on its own page (opens in new tab)

In progress

Razor Pages and MVC

<nhsuk-tag text="In progress" colour="white" />

Blazor

<NhsukTag Text="In progress" Colour="white" />

Nunjucks (upstream)

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

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

Default

Matches upstream

grey

Open on its own page (opens in new tab)

Inactive

Razor Pages and MVC

<nhsuk-tag text="Inactive" colour="grey" />

Blazor

<NhsukTag Text="Inactive" Colour="grey" />

Nunjucks (upstream)

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

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

Default

Matches upstream

green

Open on its own page (opens in new tab)

New

Razor Pages and MVC

<nhsuk-tag text="New" colour="green" />

Blazor

<NhsukTag Text="New" Colour="green" />

Nunjucks (upstream)

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

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

Default

Matches upstream

aqua-green

Open on its own page (opens in new tab)

Active

Razor Pages and MVC

<nhsuk-tag text="Active" colour="aqua-green" />

Blazor

<NhsukTag Text="Active" Colour="aqua-green" />

Nunjucks (upstream)

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

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

Default

Matches upstream

blue

Open on its own page (opens in new tab)

Pending

Razor Pages and MVC

<nhsuk-tag text="Pending" colour="blue" />

Blazor

<NhsukTag Text="Pending" Colour="blue" />

Nunjucks (upstream)

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

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

Default

Matches upstream

purple

Open on its own page (opens in new tab)

Received

Razor Pages and MVC

<nhsuk-tag text="Received" colour="purple" />

Blazor

<NhsukTag Text="Received" Colour="purple" />

Nunjucks (upstream)

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

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

Default

Matches upstream

pink

Open on its own page (opens in new tab)

Sent

Razor Pages and MVC

<nhsuk-tag text="Sent" colour="pink" />

Blazor

<NhsukTag Text="Sent" Colour="pink" />

Nunjucks (upstream)

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

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

Default

Matches upstream

red

Open on its own page (opens in new tab)

Rejected

Razor Pages and MVC

<nhsuk-tag text="Rejected" colour="red" />

Blazor

<NhsukTag Text="Rejected" Colour="red" />

Nunjucks (upstream)

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

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

Default

Matches upstream

orange

Open on its own page (opens in new tab)

Declined

Razor Pages and MVC

<nhsuk-tag text="Declined" colour="orange" />

Blazor

<NhsukTag Text="Declined" Colour="orange" />

Nunjucks (upstream)

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

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

Default

Matches upstream

yellow

Open on its own page (opens in new tab)

Delayed

Razor Pages and MVC

<nhsuk-tag text="Delayed" colour="yellow" />

Blazor

<NhsukTag Text="Delayed" Colour="yellow" />

Nunjucks (upstream)

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

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

Colour class

Matches upstream

Open on its own page (opens in new tab)

Green

Razor Pages and MVC

<nhsuk-tag text="Green" classes="nhsuk-tag--green" />

Blazor

<NhsukTag Text="Green" Classes="nhsuk-tag--green" />

Nunjucks (upstream)

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

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

Colour class overriding colour option

Matches upstream

Open on its own page (opens in new tab)

Not green

Razor Pages and MVC

<nhsuk-tag text="Not green" colour="green" classes="nhsuk-tag--red" />

Blazor

<NhsukTag Text="Not green" Colour="green" Classes="nhsuk-tag--red" />

Nunjucks (upstream)

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

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

With HTML

Matches upstream

Open on its own page (opens in new tab)

A&E

Razor Pages and MVC

<nhsuk-tag html="A&amp;E" colour="red" />

Blazor

<NhsukTag Html="A&amp;E" Colour="red" />

Nunjucks (upstream)

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

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

With HTML via call block

Matches upstream

Open on its own page (opens in new tab)

A&E

Razor Pages and MVC

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

Blazor

<NhsukTag Colour="red">
    A&amp;E
</NhsukTag>

Nunjucks (upstream)

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

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

Without border

Matches upstream

Open on its own page (opens in new tab)

Active

Razor Pages and MVC

<nhsuk-tag border="false" text="Active" />

Blazor

<NhsukTag Border="false" Text="Active" />

Nunjucks (upstream)

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

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

Without border

Matches upstream

white

Open on its own page (opens in new tab)

In progress

Razor Pages and MVC

<nhsuk-tag border="false" text="In progress" colour="white" />

Blazor

<NhsukTag Border="false" Text="In progress" Colour="white" />

Nunjucks (upstream)

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

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

Without border

Matches upstream

grey

Open on its own page (opens in new tab)

Inactive

Razor Pages and MVC

<nhsuk-tag border="false" text="Inactive" colour="grey" />

Blazor

<NhsukTag Border="false" Text="Inactive" Colour="grey" />

Nunjucks (upstream)

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

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

Without border

Matches upstream

green

Open on its own page (opens in new tab)

New

Razor Pages and MVC

<nhsuk-tag border="false" text="New" colour="green" />

Blazor

<NhsukTag Border="false" Text="New" Colour="green" />

Nunjucks (upstream)

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

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

Without border

Matches upstream

aqua-green

Open on its own page (opens in new tab)

Active

Razor Pages and MVC

<nhsuk-tag border="false" text="Active" colour="aqua-green" />

Blazor

<NhsukTag Border="false" Text="Active" Colour="aqua-green" />

Nunjucks (upstream)

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

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

Without border

Matches upstream

blue

Open on its own page (opens in new tab)

Pending

Razor Pages and MVC

<nhsuk-tag border="false" text="Pending" colour="blue" />

Blazor

<NhsukTag Border="false" Text="Pending" Colour="blue" />

Nunjucks (upstream)

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

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

Without border

Matches upstream

purple

Open on its own page (opens in new tab)

Received

Razor Pages and MVC

<nhsuk-tag border="false" text="Received" colour="purple" />

Blazor

<NhsukTag Border="false" Text="Received" Colour="purple" />

Nunjucks (upstream)

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

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

Without border

Matches upstream

pink

Open on its own page (opens in new tab)

Sent

Razor Pages and MVC

<nhsuk-tag border="false" text="Sent" colour="pink" />

Blazor

<NhsukTag Border="false" Text="Sent" Colour="pink" />

Nunjucks (upstream)

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

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

Without border

Matches upstream

red

Open on its own page (opens in new tab)

Rejected

Razor Pages and MVC

<nhsuk-tag border="false" text="Rejected" colour="red" />

Blazor

<NhsukTag Border="false" Text="Rejected" Colour="red" />

Nunjucks (upstream)

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

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

Without border

Matches upstream

orange

Open on its own page (opens in new tab)

Declined

Razor Pages and MVC

<nhsuk-tag border="false" text="Declined" colour="orange" />

Blazor

<NhsukTag Border="false" Text="Declined" Colour="orange" />

Nunjucks (upstream)

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

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

Without border

Matches upstream

yellow

Open on its own page (opens in new tab)

Delayed

Razor Pages and MVC

<nhsuk-tag border="false" text="Delayed" colour="yellow" />

Blazor

<NhsukTag Border="false" Text="Delayed" Colour="yellow" />

Nunjucks (upstream)

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

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

Without colour

Matches upstream

Open on its own page (opens in new tab)

Completed

Razor Pages and MVC

<nhsuk-tag text="Completed" colour="@("false")" />

Blazor

<NhsukTag Text="Completed" Colour="@("false")" />

Nunjucks (upstream)

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

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

With text escaping

Matches upstream

Open on its own page (opens in new tab)

A&E

Razor Pages and MVC

<nhsuk-tag text="A&E" colour="red" />

Blazor

<NhsukTag Text="A&E" Colour="red" />

Nunjucks (upstream)

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

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