Components

Tag

Use the tag component to show users the status of something.

See the GOV.UK Design System documentation on tags for more information on when to use this component.

completed

<gv-tag>completed</gv-tag>

Colours

You can set the tag colour using the following values for the colour prop.

Colour prop value	Tag
grey	inactive
green	new
turquoise	active
blue	pending
purple	received
pink	sent
red	rejected
orange	declined
yellow	delayed

<script setup lang="ts">
const options = [
  { colour: 'grey', text: 'inactive' },
  { colour: 'green', text: 'new' },
  { colour: 'turquoise', text: 'active' },
  { colour: 'blue', text: 'pending' },
  { colour: 'purple', text: 'received' },
  { colour: 'pink', text: 'sent' },
  { colour: 'red', text: 'rejected' },
  { colour: 'orange', text: 'declined' },
  { colour: 'yellow', text: 'delayed' },
]
</script>

<template>
  <gv-table>
    <gv-table-head>
      <gv-table-row>
        <gv-table-header>Colour prop value</gv-table-header>
        <gv-table-header>Tag</gv-table-header>
      </gv-table-row>
    </gv-table-head>
    <gv-table-body>
      <gv-table-row v-for="option in options">
        <gv-table-cell>{{ option.colour }}</gv-table-cell>
        <gv-table-cell>
          <gv-tag :colour="option.colour" :text="option.text" />
        </gv-table-cell>
      </gv-table-row>
    </gv-table-body>
  </gv-table>
</template>

Props

Name	Type	Description
text	string	Text to use within the tag component. If content is provided in the default slot, this prop will be ignored.
colour	string	The colour of the tag. Allowed values: grey, green, turquoise, blue, purple, pink, red, orange, yellow.

Slots

Name	Description
default	The content of the tag. If content is provided in this slot, the text prop will be ignored.