Tag

Standard

Default

The default tag has no colour modifier and is used to indicate a status.

Completed

Show code

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

---
import { Tag } from "@i-dot-ai-npm/component-library-astro";
---

<Tag>Completed</Tag>

import { Tag } from "@i-dot-ai-npm/component-library-react";

export default function Example() {
  return (
    <Tag>Completed</Tag>
  );
}

<script>
  import { Tag } from "@i-dot-ai-npm/component-library-svelte";
</script>

<Tag>Completed</Tag>

import { Tag } from "@i-dot-ai-npm/component-library-solid";

export default function Example() {
  return (
    <Tag>Completed</Tag>
  );
}

Grey

Use the grey tag to indicate a status.

Inactive

Show code

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

---
import { Tag } from "@i-dot-ai-npm/component-library-astro";
---

<Tag colour="grey">Inactive</Tag>

import { Tag } from "@i-dot-ai-npm/component-library-react";

export default function Example() {
  return (
    <Tag colour="grey">Inactive</Tag>
  );
}

<script>
  import { Tag } from "@i-dot-ai-npm/component-library-svelte";
</script>

<Tag colour="grey">Inactive</Tag>

import { Tag } from "@i-dot-ai-npm/component-library-solid";

export default function Example() {
  return (
    <Tag colour="grey">Inactive</Tag>
  );
}

Green

Use the green tag to indicate a status.

New

Show code

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

---
import { Tag } from "@i-dot-ai-npm/component-library-astro";
---

<Tag colour="green">New</Tag>

import { Tag } from "@i-dot-ai-npm/component-library-react";

export default function Example() {
  return (
    <Tag colour="green">New</Tag>
  );
}

<script>
  import { Tag } from "@i-dot-ai-npm/component-library-svelte";
</script>

<Tag colour="green">New</Tag>

import { Tag } from "@i-dot-ai-npm/component-library-solid";

export default function Example() {
  return (
    <Tag colour="green">New</Tag>
  );
}

Blue

Use the blue tag to indicate a status.

Pending

Show code

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

---
import { Tag } from "@i-dot-ai-npm/component-library-astro";
---

<Tag colour="blue">Pending</Tag>

import { Tag } from "@i-dot-ai-npm/component-library-react";

export default function Example() {
  return (
    <Tag colour="blue">Pending</Tag>
  );
}

<script>
  import { Tag } from "@i-dot-ai-npm/component-library-svelte";
</script>

<Tag colour="blue">Pending</Tag>

import { Tag } from "@i-dot-ai-npm/component-library-solid";

export default function Example() {
  return (
    <Tag colour="blue">Pending</Tag>
  );
}

Red

Use the red tag to indicate a status.

Rejected

Show code

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

---
import { Tag } from "@i-dot-ai-npm/component-library-astro";
---

<Tag colour="red">Rejected</Tag>

import { Tag } from "@i-dot-ai-npm/component-library-react";

export default function Example() {
  return (
    <Tag colour="red">Rejected</Tag>
  );
}

<script>
  import { Tag } from "@i-dot-ai-npm/component-library-svelte";
</script>

<Tag colour="red">Rejected</Tag>

import { Tag } from "@i-dot-ai-npm/component-library-solid";

export default function Example() {
  return (
    <Tag colour="red">Rejected</Tag>
  );
}

Yellow

Use the yellow tag to indicate a status.

Delayed

Show code

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

---
import { Tag } from "@i-dot-ai-npm/component-library-astro";
---

<Tag colour="yellow">Delayed</Tag>

import { Tag } from "@i-dot-ai-npm/component-library-react";

export default function Example() {
  return (
    <Tag colour="yellow">Delayed</Tag>
  );
}

<script>
  import { Tag } from "@i-dot-ai-npm/component-library-svelte";
</script>

<Tag colour="yellow">Delayed</Tag>

import { Tag } from "@i-dot-ai-npm/component-library-solid";

export default function Example() {
  return (
    <Tag colour="yellow">Delayed</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 component has been ‘completed’.