Tag – GOV.UK Design System

<!DOCTYPE html> <html lang="en" class="govuk-template"> <head> <meta charset="utf-8"> <title>Tag – GOV.UK Design System</title> <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"> <meta name="theme-color" content="#0b0c0c"> <link rel="icon" sizes="48x48" href="/assets/images/favicon.ico"> <link rel="icon" sizes="any" href="/assets/images/favicon.svg" type="image/svg+xml"> <link rel="mask-icon" href="/assets/images/govuk-icon-mask.svg" color="#0b0c0c"> <link rel="apple-touch-icon" href="/assets/images/govuk-icon-180.png"> <link rel="manifest" href="/assets/manifest.json"> <meta name="og:title" content="Tag"> <meta name="description" content="The tag component indicates the status of something, such as an item on a task list or a phase banner"> <meta name="og:description" content="The tag component indicates the status of something, such as an item on a task list or a phase banner"> <link rel="canonical" href="https://design-system.service.gov.uk/components/tag/"> <link href="/stylesheets/main-c4a333404e1796065e06bfef0e1fd954.css" rel="stylesheet" media="all"> <meta property="og:image" content="https://design-system.service.gov.uk/assets/images/govuk-opengraph-image.png"> </head> <body class="govuk-template__body" data-module="app-navigation"> <script>document.body.className += ' js-enabled' + ('noModule' in HTMLScriptElement.prototype ? ' govuk-frontend-supported' : '');</script> <a id="top"></a> <script> /** * If cookie policy changes and/or the user preferences object format needs to * change, bump this version up afterwards. The user should then be shown the * banner again to consent to the new policy. * * Note that because isValidCookieConsent checks that the version in the user's * cookie is equal to or greater than this number, you should be careful to * check backwards compatibility when changing the object format. */ window.GDS_CONSENT_COOKIE_VERSION = 2; </script> <div class="govuk-cookie-banner" data-nosnippet role="region" aria-label="Cookies on GOV.UK Design System" hidden data-module="govuk-cookie-banner" data-cookie-category="analytics"> <div class="govuk-cookie-banner__message app-width-container js-cookie-banner-message govuk-width-container"> <div class="govuk-grid-row"> <div class="govuk-grid-column-two-thirds"> <h2 class="govuk-cookie-banner__heading govuk-heading-m"> Cookies on GOV.UK Design System </h2> <div class="govuk-cookie-banner__content"> We’d like to use analytics cookies so we can understand how you use the Design System and make improvements. We also use essential cookies to remember if you’ve accepted analytics cookies. </div> </div> </div> <div class="govuk-button-group"> <button type="button" class="govuk-button js-cookie-banner-accept" data-module="govuk-button"> Accept analytics cookies </button> <button type="button" class="govuk-button js-cookie-banner-reject" data-module="govuk-button"> Reject analytics cookies </button> <a class="govuk-link" href="/cookies/">View cookies</a> </div> </div> <div class="govuk-cookie-banner__message js-cookie-banner-confirmation-accept app-width-container govuk-width-container" role="alert" hidden> <div class="govuk-grid-row"> <div class="govuk-grid-column-two-thirds"> <div class="govuk-cookie-banner__content"> You’ve accepted analytics cookies. You can <a class="govuk-link" href="/cookies/">change your cookie settings</a> at any time. </div> </div> </div> <div class="govuk-button-group"> <button type="button" class="govuk-button js-cookie-banner-hide js-cookie-banner-hide--accept" data-module="govuk-button"> Hide cookie message </button> </div> </div> <div class="govuk-cookie-banner__message js-cookie-banner-confirmation-reject app-width-container govuk-width-container" role="alert" hidden> <div class="govuk-grid-row"> <div class="govuk-grid-column-two-thirds"> <div class="govuk-cookie-banner__content"> You’ve rejected analytics cookies. You can <a class="govuk-link" href="/cookies/">change your cookie settings</a> at any time. </div> </div> </div> <div class="govuk-button-group"> <button type="button" class="govuk-button js-cookie-banner-hide js-cookie-banner-hide--reject" data-module="govuk-button"> Hide cookie message </button> </div> </div> </div> <script> (function () { // Skip early setup when cookie banner component is not supported if (!('noModule' in HTMLScriptElement.prototype)) { return } /** * Check the cookie preferences object. * * If the consent object is not present, malformed, or incorrect version, * returns false, otherwise returns true. * * This is also duplicated in cookie-functions.js - the two need to be kept in sync */ function isValidConsentCookie (options) { return (options && options.version >= window.GDS_CONSENT_COOKIE_VERSION) } function categoryIsNull (options) { return (options && options.analytics === null) } // Don't show the banner on the cookies page if (window.location.pathname !== "/cookies/") { // Show the banner if there is no consent cookie or if it is outdated var currentConsentCookie = document.cookie.match(new RegExp('(^| )design_system_cookies_policy=([^;]+)')) const cookieData = currentConsentCookie && JSON.parse(currentConsentCookie[2]); const cookieNotSet = (!currentConsentCookie || !isValidConsentCookie(cookieData)) const categoryNotSet = isValidConsentCookie(cookieData) && categoryIsNull(cookieData) if (cookieNotSet || categoryNotSet) { var cookieBanner = document.querySelector("[data-cookie-category='analytics']") cookieBanner.removeAttribute('hidden') } } })() </script> <a href="#main-content" class="govuk-skip-link" data-module="govuk-skip-link">Skip to main content</a> <header class="govuk-header govuk-header--full-width-border" role="banner"> <div class="govuk-header__container app-width-container"> <div class="govuk-header__logo app-header-logo"> <a href="/" class="govuk-header__link govuk-header__link--homepage"> <svg focusable="false" role="img" class="govuk-header__logotype" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 148 30" height="30" width="148" aria-label="GOV.UK" > <title>GOV.UK</title> <path d="M22.6 10.4c-1 .4-2-.1-2.4-1-.4-.9.1-2 1-2.4.9-.4 2 .1 2.4 1s-.1 2-1 2.4m-5.9 6.7c-.9.4-2-.1-2.4-1-.4-.9.1-2 1-2.4.9-.4 2 .1 2.4 1s-.1 2-1 2.4m10.8-3.7c-1 .4-2-.1-2.4-1-.4-.9.1-2 1-2.4.9-.4 2 .1 2.4 1s0 2-1 2.4m3.3 4.8c-1 .4-2-.1-2.4-1-.4-.9.1-2 1-2.4.9-.4 2 .1 2.4 1s-.1 2-1 2.4M17 4.7l2.3 1.2V2.5l-2.3.7-.2-.2.9-3h-3.4l.9 3-.2.2c-.1.1-2.3-.7-2.3-.7v3.4L15 4.7c.1.1.1.2.2.2l-1.3 4c-.1.2-.1.4-.1.6 0 1.1.8 2 1.9 2.2h.7c1-.2 1.9-1.1 1.9-2.1 0-.2 0-.4-.1-.6l-1.3-4c-.1-.2 0-.2.1-.3m-7.6 5.7c.9.4 2-.1 2.4-1 .4-.9-.1-2-1-2.4-.9-.4-2 .1-2.4 1s0 2 1 2.4m-5 3c.9.4 2-.1 2.4-1 .4-.9-.1-2-1-2.4-.9-.4-2 .1-2.4 1s.1 2 1 2.4m-3.2 4.8c.9.4 2-.1 2.4-1 .4-.9-.1-2-1-2.4-.9-.4-2 .1-2.4 1s0 2 1 2.4m14.8 11c4.4 0 8.6.3 12.3.8 1.1-4.5 2.4-7 3.7-8.8l-2.5-.9c.2 1.3.3 1.9 0 2.7-.4-.4-.8-1.1-1.1-2.3l-1.2 4c.7-.5 1.3-.8 2-.9-1.1 2.5-2.6 3.1-3.5 3-1.1-.2-1.7-1.2-1.5-2.1.3-1.2 1.5-1.5 2.1-.1 1.1-2.3-.8-3-2-2.3 1.9-1.9 2.1-3.5.6-5.6-2.1 1.6-2.1 3.2-1.2 5.5-1.2-1.4-3.2-.6-2.5 1.6.9-1.4 2.1-.5 1.9.8-.2 1.1-1.7 2.1-3.5 1.9-2.7-.2-2.9-2.1-2.9-3.6.7-.1 1.9.5 2.9 1.9l.4-4.3c-1.1 1.1-2.1 1.4-3.2 1.4.4-1.2 2.1-3 2.1-3h-5.4s1.7 1.9 2.1 3c-1.1 0-2.1-.2-3.2-1.4l.4 4.3c1-1.4 2.2-2 2.9-1.9-.1 1.5-.2 3.4-2.9 3.6-1.9.2-3.4-.8-3.5-1.9-.2-1.3 1-2.2 1.9-.8.7-2.3-1.2-3-2.5-1.6.9-2.2.9-3.9-1.2-5.5-1.5 2-1.3 3.7.6 5.6-1.2-.7-3.1 0-2 2.3.6-1.4 1.8-1.1 2.1.1.2.9-.3 1.9-1.5 2.1-.9.2-2.4-.5-3.5-3 .6 0 1.2.3 2 .9l-1.2-4c-.3 1.1-.7 1.9-1.1 2.3-.3-.8-.2-1.4 0-2.7l-2.9.9C1.3 23 2.6 25.5 3.7 30c3.7-.5 7.9-.8 12.3-.8m28.3-11.6c0 .9.1 1.7.3 2.5.2.8.6 1.5 1 2.2.5.6 1 1.1 1.7 1.5.7.4 1.5.6 2.5.6.9 0 1.7-.1 2.3-.4s1.1-.7 1.5-1.1c.4-.4.6-.9.8-1.5.1-.5.2-1 .2-1.5v-.2h-5.3v-3.2h9.4V28H55v-2.5c-.3.4-.6.8-1 1.1-.4.3-.8.6-1.3.9-.5.2-1 .4-1.6.6s-1.2.2-1.8.2c-1.5 0-2.9-.3-4-.8-1.2-.6-2.2-1.3-3-2.3-.8-1-1.4-2.1-1.8-3.4-.3-1.4-.5-2.8-.5-4.3s.2-2.9.7-4.2c.5-1.3 1.1-2.4 2-3.4.9-1 1.9-1.7 3.1-2.3 1.2-.6 2.6-.8 4.1-.8 1 0 1.9.1 2.8.3.9.2 1.7.6 2.4 1s1.4.9 1.9 1.5c.6.6 1 1.3 1.4 2l-3.7 2.1c-.2-.4-.5-.9-.8-1.2-.3-.4-.6-.7-1-1-.4-.3-.8-.5-1.3-.7-.5-.2-1.1-.2-1.7-.2-1 0-1.8.2-2.5.6-.7.4-1.3.9-1.7 1.5-.5.6-.8 1.4-1 2.2-.3.8-.4 1.9-.4 2.7zM71.5 6.8c1.5 0 2.9.3 4.2.8 1.2.6 2.3 1.3 3.1 2.3.9 1 1.5 2.1 2 3.4s.7 2.7.7 4.2-.2 2.9-.7 4.2c-.4 1.3-1.1 2.4-2 3.4-.9 1-1.9 1.7-3.1 2.3-1.2.6-2.6.8-4.2.8s-2.9-.3-4.2-.8c-1.2-.6-2.3-1.3-3.1-2.3-.9-1-1.5-2.1-2-3.4-.4-1.3-.7-2.7-.7-4.2s.2-2.9.7-4.2c.4-1.3 1.1-2.4 2-3.4.9-1 1.9-1.7 3.1-2.3 1.2-.5 2.6-.8 4.2-.8zm0 17.6c.9 0 1.7-.2 2.4-.5s1.3-.8 1.7-1.4c.5-.6.8-1.3 1.1-2.2.2-.8.4-1.7.4-2.7v-.1c0-1-.1-1.9-.4-2.7-.2-.8-.6-1.6-1.1-2.2-.5-.6-1.1-1.1-1.7-1.4-.7-.3-1.5-.5-2.4-.5s-1.7.2-2.4.5-1.3.8-1.7 1.4c-.5.6-.8 1.3-1.1 2.2-.2.8-.4 1.7-.4 2.7v.1c0 1 .1 1.9.4 2.7.2.8.6 1.6 1.1 2.2.5.6 1.1 1.1 1.7 1.4.6.3 1.4.5 2.4.5zM88.9 28 83 7h4.7l4 15.7h.1l4-15.7h4.7l-5.9 21h-5.7zm28.8-3.6c.6 0 1.2-.1 1.7-.3.5-.2 1-.4 1.4-.8.4-.4.7-.8.9-1.4.2-.6.3-1.2.3-2v-13h4.1v13.6c0 1.2-.2 2.2-.6 3.1s-1 1.7-1.8 2.4c-.7.7-1.6 1.2-2.7 1.5-1 .4-2.2.5-3.4.5-1.2 0-2.4-.2-3.4-.5-1-.4-1.9-.9-2.7-1.5-.8-.7-1.3-1.5-1.8-2.4-.4-.9-.6-2-.6-3.1V6.9h4.2v13c0 .8.1 1.4.3 2 .2.6.5 1 .9 1.4.4.4.8.6 1.4.8.6.2 1.1.3 1.8.3zm13-17.4h4.2v9.1l7.4-9.1h5.2l-7.2 8.4L148 28h-4.9l-5.5-9.4-2.7 3V28h-4.2V7zm-27.6 16.1c-1.5 0-2.7 1.2-2.7 2.7s1.2 2.7 2.7 2.7 2.7-1.2 2.7-2.7-1.2-2.7-2.7-2.7z"></path> </svg> Design System </a> </div> <div class="app-site-search" data-module="app-search" data-search-index="/search-index-0864382ee8f73428a07ab1782893f578.json"> <label class="govuk-visually-hidden" for="app-site-search__input">Search Design system</label> <a class="app-site-search__link govuk-link" href="/sitemap/">Sitemap</a> </div> <button type="button" class="govuk-header__menu-button app-navigation__menu-button js-app-navigation__toggler" aria-controls="app-navigation" hidden> Menu </button> </div> </header> <nav id="app-navigation" class="app-navigation js-app-navigation govuk-clearfix" role="navigation" aria-labelledby="app-navigation-heading"> <h2 class="govuk-visually-hidden" id="app-navigation-heading">Menu</h2> <ul class="app-navigation__list app-width-container"> <li class="app-navigation__list-item "> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline app-navigation__link js-app-navigation__link" href="/get-started/"> Get started </a> <button type="button" class="app-navigation__button js-app-navigation__button" hidden> Get started </button>  <ul class="app-navigation__subnav js-app-navigation__subnav " aria-label="Get started" hidden > <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/get-started/"> Get started overview </a> </li> <li> <h3 class="app-navigation__theme">Setup guides</h3> <ul class="app-navigation__list"> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/get-started/prototyping/"> Prototyping </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/get-started/production/"> Production </a> </li> </ul> </li> <li> <h3 class="app-navigation__theme">How to guides</h3> <ul class="app-navigation__list"> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/get-started/labels-legends-headings/"> Making labels and legends headings </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/get-started/extending-and-modifying-components/"> Extending and modifying components in production </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/get-started/focus-states/"> Understanding focus state styles </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/get-started/new-type-scale/"> Updating your service to use the new type scale </a> </li> </ul> </li> </ul> </li> <li class="app-navigation__list-item "> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline app-navigation__link js-app-navigation__link" href="/styles/"> Styles </a> <button type="button" class="app-navigation__button js-app-navigation__button" hidden> Styles </button>  <ul class="app-navigation__subnav js-app-navigation__subnav " aria-label="Styles" hidden > <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/styles/"> Styles overview </a> </li> <li> <h3 class="app-navigation__theme">Page structure</h3> <ul class="app-navigation__list"> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/styles/page-template/"> Page template </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/styles/layout/"> Layout </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/styles/spacing/"> Spacing </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/styles/section-break/"> Section break </a> </li> </ul> </li> <li> <h3 class="app-navigation__theme">Typography</h3> <ul class="app-navigation__list"> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/styles/typeface/"> Typeface </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/styles/type-scale/"> Type scale </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/styles/headings/"> Headings </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/styles/paragraphs/"> Paragraphs </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/styles/links/"> Links </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/styles/lists/"> Lists </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/styles/font-override-classes/"> Font override classes </a> </li> </ul> </li> <li> <h3 class="app-navigation__theme">Visual elements</h3> <ul class="app-navigation__list"> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/styles/colour/"> Colour </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/styles/images/"> Images </a> </li> </ul> </li> </ul> </li> <li class="app-navigation__list-item app-navigation__list-item--current"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline app-navigation__link js-app-navigation__link" href="/components/"> Components </a> <button type="button" class="app-navigation__button js-app-navigation__button" hidden> Components </button>  <ul class="app-navigation__subnav js-app-navigation__subnav app-navigation__subnav--active" aria-label="Components" hidden > <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/"> Components overview </a> </li> <li> <ul class="app-navigation__list"> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/accordion/"> Accordion </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/back-link/"> Back link </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/breadcrumbs/"> Breadcrumbs </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/button/"> Button </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/character-count/"> Character count </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/checkboxes/"> Checkboxes </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/cookie-banner/"> Cookie banner </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/date-input/"> Date input </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/details/"> Details </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/error-message/"> Error message </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/error-summary/"> Error summary </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/exit-this-page/"> Exit this page </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/fieldset/"> Fieldset </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/file-upload/"> File upload </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/footer/"> GOV.UK footer </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/header/"> GOV.UK header </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/inset-text/"> Inset text </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/notification-banner/"> Notification banner </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/pagination/"> Pagination </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/panel/"> Panel </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/password-input/"> Password input </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/phase-banner/"> Phase banner </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/radios/"> Radios </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/select/"> Select </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/service-navigation/"> Service navigation </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/skip-link/"> Skip link </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/summary-list/"> Summary list </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/table/"> Table </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/tabs/"> Tabs </a> </li> <li class="app-navigation__subnav-item app-navigation__subnav-item--current"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/tag/"> Tag </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/task-list/"> Task list </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/text-input/"> Text input </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/textarea/"> Textarea </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/warning-text/"> Warning text </a> </li> </ul> </li> </ul> </li> <li class="app-navigation__list-item "> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline app-navigation__link js-app-navigation__link" href="/patterns/"> Patterns </a> <button type="button" class="app-navigation__button js-app-navigation__button" hidden> Patterns </button>  <ul class="app-navigation__subnav js-app-navigation__subnav " aria-label="Patterns" hidden > <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/patterns/"> Patterns overview </a> </li> <li> <h3 class="app-navigation__theme">Ask users for…</h3> <ul class="app-navigation__list"> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/patterns/addresses/"> Addresses </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/patterns/bank-details/"> Bank details </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/patterns/dates/"> Dates </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/patterns/email-addresses/"> Email addresses </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/patterns/equality-information/"> Equality information </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/patterns/gender-or-sex/"> Gender or sex </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/patterns/names/"> Names </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/patterns/national-insurance-numbers/"> National Insurance numbers </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/patterns/passwords/"> Passwords </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/patterns/payment-card-details/"> Payment card details </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/patterns/phone-numbers/"> Phone numbers </a> </li> </ul> </li> <li> <h3 class="app-navigation__theme">Help users to…</h3> <ul class="app-navigation__list"> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/patterns/check-a-service-is-suitable/"> Check a service is suitable </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/patterns/check-answers/"> Check answers </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/patterns/complete-multiple-tasks/"> Complete multiple tasks </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/patterns/confirm-a-phone-number/"> Confirm a phone number </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/patterns/confirm-an-email-address/"> Confirm an email address </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/patterns/contact-a-department-or-service-team/"> Contact a department or service team </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/patterns/create-a-username/"> Create a username </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/patterns/create-accounts/"> Create accounts </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/patterns/exit-a-page-quickly/"> Exit a page quickly </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/patterns/navigate-a-service/"> Navigate a service </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/patterns/start-using-a-service/"> Start using a service </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/patterns/validation/"> Recover from validation errors </a> </li> </ul> </li> <li> <h3 class="app-navigation__theme">Pages</h3> <ul class="app-navigation__list"> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/patterns/confirmation-pages/"> Confirmation pages </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/patterns/cookies-page/"> Cookies page </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/patterns/page-not-found-pages/"> Page not found pages </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/patterns/problem-with-the-service-pages/"> There is a problem with the service pages </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/patterns/question-pages/"> Question pages </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/patterns/service-unavailable-pages/"> Service unavailable pages </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/patterns/step-by-step-navigation/"> Step by step navigation </a> </li> </ul> </li> </ul> </li> <li class="app-navigation__list-item "> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline app-navigation__link js-app-navigation__link" href="/community/"> Community </a> <button type="button" class="app-navigation__button js-app-navigation__button" hidden> Community </button>  <ul class="app-navigation__subnav js-app-navigation__subnav " aria-label="Community" hidden > <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/community/"> Community overview </a> </li> <li> <h3 class="app-navigation__theme">What we’re working on</h3> <ul class="app-navigation__list"> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/community/upcoming-components-patterns/"> Upcoming components and patterns </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/community/roadmap/"> Roadmap </a> </li> </ul> </li> <li> <h3 class="app-navigation__theme">Ways to get involved</h3> <ul class="app-navigation__list"> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/community/share-research-findings/"> Share findings about your users </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/community/propose-a-component-or-pattern/"> Propose a component or pattern </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/community/develop-a-component-or-pattern/"> Develop a component or pattern </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/community/propose-a-content-change-using-github/"> Propose a content change using GitHub </a> </li> </ul> </li> <li> <h3 class="app-navigation__theme">How we work</h3> <ul class="app-navigation__list"> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/community/community-principles/"> Community principles </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/community/contribution-criteria/"> Contribution criteria </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/community/design-system-working-group/"> Design System working group </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/community/blogs-talks-podcasts/"> Blog posts, videos and podcasts </a> </li> </ul> </li> <li> <h3 class="app-navigation__theme">Resources</h3> <ul class="app-navigation__list"> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/community/resources-and-tools/"> Resources and tools </a> </li> </ul> </li> <li> <h3 class="app-navigation__theme">Events and workshops</h3> <ul class="app-navigation__list"> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/community/design-system-day/"> Design System Day Events </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/community/design-system-day-2022/"> Design System Day 2022 </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/community/design-system-day-2023/"> Design System Day 2023 </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/community/design-system-day-2024/"> Design System Day 2024 </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/community/code-of-conduct/"> Code of Conduct </a> </li> </ul> </li> </ul> </li> <li class="app-navigation__list-item "> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline app-navigation__link js-app-navigation__link" href="/accessibility/"> Accessibility </a> <button type="button" class="app-navigation__button js-app-navigation__button" hidden> Accessibility </button>  <ul class="app-navigation__subnav js-app-navigation__subnav " aria-label="Accessibility" hidden > <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/accessibility/"> Accessibility overview </a> </li> <li> <ul class="app-navigation__list"> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/accessibility/wcag-2.2/"> Changes to the Design System to meet WCAG 2.2 </a> </li> <li class="app-navigation__subnav-item"> <a class="govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/accessibility/accessibility-strategy/"> Accessibility strategy </a> </li> </ul> </li> </ul> </li> </ul> </nav> <div class="app-split-pane app-width-container"> <div class="app-split-pane__nav">  <nav class="app-subnav" aria-labelledby="app-subnav-heading"> <h2 class="govuk-visually-hidden" id="app-subnav-heading">Pages in this section</h2> <ul class="app-subnav__section"> <li class="app-subnav__section-item"> <a class="app-subnav__link govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/accordion/"> Accordion </a> </li> <li class="app-subnav__section-item"> <a class="app-subnav__link govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/back-link/"> Back link </a> </li> <li class="app-subnav__section-item"> <a class="app-subnav__link govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/breadcrumbs/"> Breadcrumbs </a> </li> <li class="app-subnav__section-item"> <a class="app-subnav__link govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/button/"> Button </a> </li> <li class="app-subnav__section-item"> <a class="app-subnav__link govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/character-count/"> Character count </a> </li> <li class="app-subnav__section-item"> <a class="app-subnav__link govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/checkboxes/"> Checkboxes </a> </li> <li class="app-subnav__section-item"> <a class="app-subnav__link govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/cookie-banner/"> Cookie banner </a> </li> <li class="app-subnav__section-item"> <a class="app-subnav__link govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/date-input/"> Date input </a> </li> <li class="app-subnav__section-item"> <a class="app-subnav__link govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/details/"> Details </a> </li> <li class="app-subnav__section-item"> <a class="app-subnav__link govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/error-message/"> Error message </a> </li> <li class="app-subnav__section-item"> <a class="app-subnav__link govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/error-summary/"> Error summary </a> </li> <li class="app-subnav__section-item"> <a class="app-subnav__link govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/exit-this-page/"> Exit this page </a> </li> <li class="app-subnav__section-item"> <a class="app-subnav__link govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/fieldset/"> Fieldset </a> </li> <li class="app-subnav__section-item"> <a class="app-subnav__link govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/file-upload/"> File upload </a> </li> <li class="app-subnav__section-item"> <a class="app-subnav__link govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/footer/"> GOV.UK footer </a> </li> <li class="app-subnav__section-item"> <a class="app-subnav__link govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/header/"> GOV.UK header </a> </li> <li class="app-subnav__section-item"> <a class="app-subnav__link govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/inset-text/"> Inset text </a> </li> <li class="app-subnav__section-item"> <a class="app-subnav__link govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/notification-banner/"> Notification banner </a> </li> <li class="app-subnav__section-item"> <a class="app-subnav__link govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/pagination/"> Pagination </a> </li> <li class="app-subnav__section-item"> <a class="app-subnav__link govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/panel/"> Panel </a> </li> <li class="app-subnav__section-item"> <a class="app-subnav__link govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/password-input/"> Password input </a> </li> <li class="app-subnav__section-item"> <a class="app-subnav__link govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/phase-banner/"> Phase banner </a> </li> <li class="app-subnav__section-item"> <a class="app-subnav__link govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/radios/"> Radios </a> </li> <li class="app-subnav__section-item"> <a class="app-subnav__link govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/select/"> Select </a> </li> <li class="app-subnav__section-item"> <a class="app-subnav__link govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/service-navigation/"> Service navigation </a> </li> <li class="app-subnav__section-item"> <a class="app-subnav__link govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/skip-link/"> Skip link </a> </li> <li class="app-subnav__section-item"> <a class="app-subnav__link govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/summary-list/"> Summary list </a> </li> <li class="app-subnav__section-item"> <a class="app-subnav__link govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/table/"> Table </a> </li> <li class="app-subnav__section-item"> <a class="app-subnav__link govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/tabs/"> Tabs </a> </li> <li class="app-subnav__section-item app-subnav__section-item--current"> <a class="app-subnav__link govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/tag/" aria-current="page"> Tag </a> </li> <li class="app-subnav__section-item"> <a class="app-subnav__link govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/task-list/"> Task list </a> </li> <li class="app-subnav__section-item"> <a class="app-subnav__link govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/text-input/"> Text input </a> </li> <li class="app-subnav__section-item"> <a class="app-subnav__link govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/textarea/"> Textarea </a> </li> <li class="app-subnav__section-item"> <a class="app-subnav__link govuk-link govuk-link--no-visited-state govuk-link--no-underline" href="/components/warning-text/"> Warning text </a> </li> </ul> </nav> </div> <div class="app-split-pane__content"> <main id="main-content" class="app-content" role="main"> Components <h1 class="govuk-heading-xl"> Tag </h1> <div class="app-prose-scope"> Use the tag component to show users the status of something. <div class="govuk-inset-text app-wcag-callout"> WCAG 2.2 <h2> New WCAG 2.2 criteria affect this component </h2> To use the ‘Tag’ and meet the new Web Content Accessibility Guidelines (WCAG) 2.2 criteria: <ul class="govuk-list"> <li><a class="govuk-link" href="#wcag-tag-no-dragging-reorder">if you choose to add functionality to reorder tags, make sure users can do so without relying on 'click and drag' movements ()</a></li> </ul> See the full list of <a class="govuk-link" href="/accessibility/wcag-2.2/#components-and-patterns-affected-in-the-design-system">components and patterns affected by WCAG 2.2</a>. </div> <div class="app-example-wrapper" id="tag-example" data-module="app-tabs"> <div class="app-example app-example--tabs"> <div class="app-example__toolbar"> <a class='app-example__new-window' href='/components/tag/default/' target='_blank'> Open this example in a new tab: tag </a> </div> <iframe title="Tag example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable" src="/components/tag/default/index.html" loading="eager"></iframe> </div> <ul class="app-tabs" role="tablist"> <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#tag-example-html" role="tab" aria-controls="tag-example-html" data-track="tab-html">HTML</a></li> <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#tag-example-nunjucks" role="tab" aria-controls="tag-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li> </ul> <div class="app-tabs__heading js-tabs__heading"><a href="#tag-example-html" aria-controls="tag-example-html" data-track="tab-html">HTML</a></div> <div class="app-tabs__container js-tabs__container" id="tag-example-html" role="tabpanel"> <div class="app-example__code" data-module="app-copy"> <pre><code data-module="app-scroll-container" tabindex="0" class="language-html"><strong class="govuk-tag"> Completed </strong></code></pre> </div> </div> <div class="app-tabs__heading js-tabs__heading"><a class="app-tabs__heading-link" href="#tag-example-nunjucks" aria-controls="tag-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></div> <div class="app-tabs__container js-tabs__container" id="tag-example-nunjucks" role="tabpanel"> <details class="govuk-details app-options" id="options-tag-example-details"> <summary class="govuk-details__summary"> Nunjucks macro options </summary> <div class="govuk-details__text"> Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text. Some options are required for the macro to work; these are marked as “Required” in the option description. If you’re using Nunjucks macros in production with “html” options, or ones ending with “html”, you must sanitise the HTML to protect against <a href="https://developer.mozilla.org/en-US/docs/Glossary/Cross-site_scripting">cross-site scripting exploits</a>. <table class="govuk-table app-options__table" id="options-tag-example--primary"> <caption class="govuk-table__caption govuk-heading-m govuk-visually-hidden">Primary options</caption> <thead class="govuk-table__head"> <tr class="govuk-table__row"> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th> <th class="govuk-table__header" scope="col">Description</th> </tr> </thead> <tbody class="govuk-table__body"> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">text</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Required. If <code>html</code> is set, this is not required. Text to use within the tag component. If <code>html</code> is provided, the <code>text</code> option will be ignored. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">html</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Required. If <code>text</code> is set, this is not required. HTML to use within the tag component. If <code>html</code> is provided, the <code>text</code> option will be ignored. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">classes</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Classes to add to the tag. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">attributes</th> <td class="govuk-table__cell">object</td> <td class="govuk-table__cell"> HTML attributes (for example data attributes) to add to the tag. </td> </tr> </tbody> </table> </div> </details> <div class="app-example__code" data-module="app-copy"> <pre><code data-module="app-scroll-container" tabindex="0" class="language-njk">{%- from "govuk/components/tag/macro.njk" import govukTag -%} {{ govukTag({ text: "Completed" }) }}</code></pre> </div> </div> </div> <h2 id="when-to-use-this-component">When to use this component</h2> 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 <a href="/components/task-list/">Task list component</a> has been ‘completed’. <h2 id="how-it-works">How it works</h2> There are two ways to use the tag component. You can use HTML or, if you are using <a href="https://mozilla.github.io/nunjucks/">Nunjucks</a> or the <a href="https://prototype-kit.service.gov.uk">GOV.UK Prototype Kit</a>, you can use the Nunjucks macro. Tags are only used to indicate a status. Do not make a tag interactive by making it into a link or button. Use adjectives (descriptive words) and not verbs (action words) for the names of your tags. Using a verb might make a user think that clicking on them will do something. Do not use tags to create links, buttons or other interactive elements, as users: <ul> <li>are unlikely to identify the tags as something they’re meant to interact with</li> <li>would see no visual difference between interactive and non-interactive tags</li> </ul> <h2 id="showing-one-or-two-statuses">Showing one or two statuses</h2> 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 have not, you may only need a ‘Completed’ tag. Because the user understands that if something does not have a tag, that means it’s incomplete. The <a href="/patterns/complete-multiple-tasks/">Complete multiple tasks pattern</a> 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. <div class="app-example-wrapper" id="multiple-tags-tag-example" data-module="app-tabs"> <div class="app-example app-example--tabs"> <div class="app-example__toolbar"> <a class='app-example__new-window' href='/components/tag/multiple-tags/' target='_blank'> Open this example in a new tab: multiple tags – tag </a> </div> <iframe title="Multiple tags – Tag example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable" src="/components/tag/multiple-tags/index.html" loading="lazy"></iframe> </div> <ul class="app-tabs" role="tablist"> <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#multiple-tags-tag-example-html" role="tab" aria-controls="multiple-tags-tag-example-html" data-track="tab-html">HTML</a></li> <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#multiple-tags-tag-example-nunjucks" role="tab" aria-controls="multiple-tags-tag-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li> </ul> <div class="app-tabs__heading js-tabs__heading"><a href="#multiple-tags-tag-example-html" aria-controls="multiple-tags-tag-example-html" data-track="tab-html">HTML</a></div> <div class="app-tabs__container js-tabs__container" id="multiple-tags-tag-example-html" role="tabpanel"> <div class="app-example__code" data-module="app-copy"> <pre><code data-module="app-scroll-container" tabindex="0" class="language-html"><table class="govuk-table"> <thead class="govuk-table__head"> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="col"> Name of user </th> <th class="govuk-table__header" scope="col"> Status </th> </tr> </thead> <tbody class="govuk-table__body"> <tr class="govuk-table__row"> <td class="govuk-table__cell"> Rachel Silver </td> <td class="govuk-table__cell"> <strong class="govuk-tag govuk-tag--grey"> Inactive </strong> </td> </tr> <tr class="govuk-table__row"> <td class="govuk-table__cell"> Jesse Smith </td> <td class="govuk-table__cell"> <strong class="govuk-tag govuk-tag--grey"> Inactive </strong> </td> </tr> <tr class="govuk-table__row"> <td class="govuk-table__cell"> Joshua Wessel </td> <td class="govuk-table__cell"> <strong class="govuk-tag"> Active </strong> </td> </tr> <tr class="govuk-table__row"> <td class="govuk-table__cell"> Rachael Pepper </td> <td class="govuk-table__cell"> <strong class="govuk-tag"> Active </strong> </td> </tr> <tr class="govuk-table__row"> <td class="govuk-table__cell"> Stuart Say </td> <td class="govuk-table__cell"> <strong class="govuk-tag govuk-tag--grey"> Inactive </strong> </td> </tr> <tr class="govuk-table__row"> <td class="govuk-table__cell"> Laura Frith </td> <td class="govuk-table__cell"> <strong class="govuk-tag"> Active </strong> </td> </tr> <tr class="govuk-table__row"> <td class="govuk-table__cell"> Tim Harvey </td> <td class="govuk-table__cell"> <strong class="govuk-tag govuk-tag--grey"> Inactive </strong> </td> </tr> </tbody> </table></code></pre> </div> </div> <div class="app-tabs__heading js-tabs__heading"><a class="app-tabs__heading-link" href="#multiple-tags-tag-example-nunjucks" aria-controls="multiple-tags-tag-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></div> <div class="app-tabs__container js-tabs__container" id="multiple-tags-tag-example-nunjucks" role="tabpanel"> <details class="govuk-details app-options" id="options-multiple-tags-tag-example-details"> <summary class="govuk-details__summary"> Nunjucks macro options </summary> <div class="govuk-details__text"> Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text. Some options are required for the macro to work; these are marked as “Required” in the option description. If you’re using Nunjucks macros in production with “html” options, or ones ending with “html”, you must sanitise the HTML to protect against <a href="https://developer.mozilla.org/en-US/docs/Glossary/Cross-site_scripting">cross-site scripting exploits</a>. <table class="govuk-table app-options__table" id="options-multiple-tags-tag-example--primary"> <caption class="govuk-table__caption govuk-heading-m govuk-visually-hidden">Primary options</caption> <thead class="govuk-table__head"> <tr class="govuk-table__row"> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th> <th class="govuk-table__header" scope="col">Description</th> </tr> </thead> <tbody class="govuk-table__body"> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">text</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Required. If <code>html</code> is set, this is not required. Text to use within the tag component. If <code>html</code> is provided, the <code>text</code> option will be ignored. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">html</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Required. If <code>text</code> is set, this is not required. HTML to use within the tag component. If <code>html</code> is provided, the <code>text</code> option will be ignored. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">classes</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Classes to add to the tag. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">attributes</th> <td class="govuk-table__cell">object</td> <td class="govuk-table__cell"> HTML attributes (for example data attributes) to add to the tag. </td> </tr> </tbody> </table> </div> </details> <div class="app-example__code" data-module="app-copy"> <pre><code data-module="app-scroll-container" tabindex="0" class="language-njk">{%- from "govuk/components/tag/macro.njk" import govukTag -%} <table class="govuk-table"> <thead class="govuk-table__head"> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="col"> Name of user </th> <th class="govuk-table__header" scope="col"> Status </th> </tr> </thead> <tbody class="govuk-table__body"> <tr class="govuk-table__row"> <td class="govuk-table__cell"> Rachel Silver </td> <td class="govuk-table__cell"> {{govukTag({ text: "Inactive", classes: "govuk-tag--grey" })}} </td> </tr> <tr class="govuk-table__row"> <td class="govuk-table__cell"> Jesse Smith </td> <td class="govuk-table__cell"> {{govukTag({ text: "Inactive", classes: "govuk-tag--grey" })}} </td> </tr> <tr class="govuk-table__row"> <td class="govuk-table__cell"> Joshua Wessel </td> <td class="govuk-table__cell"> {{govukTag({ text: "Active" })}} </td> </tr> <tr class="govuk-table__row"> <td class="govuk-table__cell"> Rachael Pepper </td> <td class="govuk-table__cell"> {{govukTag({ text: "Active" })}} </td> </tr> <tr class="govuk-table__row"> <td class="govuk-table__cell"> Stuart Say </td> <td class="govuk-table__cell"> {{govukTag({ text: "Inactive", classes: "govuk-tag--grey" })}} </td> </tr> <tr class="govuk-table__row"> <td class="govuk-table__cell"> Laura Frith </td> <td class="govuk-table__cell"> {{govukTag({ text: "Active" })}} </td> </tr> <tr class="govuk-table__row"> <td class="govuk-table__cell"> Tim Harvey </td> <td class="govuk-table__cell"> {{govukTag({ text: "Inactive", classes: "govuk-tag--grey" })}} </td> </tr> </tbody> </table></code></pre> </div> </div> </div> <h2 id="showing-multiple-statuses">Showing multiple statuses</h2> 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. <div class="app-example-wrapper" id="coloured-tags-tag-example" data-module="app-tabs"> <div class="app-example app-example--tabs"> <div class="app-example__toolbar"> <a class='app-example__new-window' href='/components/tag/coloured-tags/' target='_blank'> Open this example in a new tab: coloured tags – tag </a> </div> <iframe title="Coloured tags – Tag example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable" src="/components/tag/coloured-tags/index.html" loading="lazy"></iframe> </div> <ul class="app-tabs" role="tablist"> <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#coloured-tags-tag-example-html" role="tab" aria-controls="coloured-tags-tag-example-html" data-track="tab-html">HTML</a></li> <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#coloured-tags-tag-example-nunjucks" role="tab" aria-controls="coloured-tags-tag-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li> </ul> <div class="app-tabs__heading js-tabs__heading"><a href="#coloured-tags-tag-example-html" aria-controls="coloured-tags-tag-example-html" data-track="tab-html">HTML</a></div> <div class="app-tabs__container js-tabs__container" id="coloured-tags-tag-example-html" role="tabpanel"> <div class="app-example__code" data-module="app-copy"> <pre><code data-module="app-scroll-container" tabindex="0" class="language-html"><table class="govuk-table"> <thead class="govuk-table__head"> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="col"> Application </th> <th class="govuk-table__header" scope="col"> Status </th> </tr> </thead> <tbody class="govuk-table__body"> <tr class="govuk-table__row"> <td class="govuk-table__cell"> Joshua Wessel </td> <td class="govuk-table__cell"> <strong class="govuk-tag govuk-tag--red"> Urgent </strong> </td> </tr> <tr class="govuk-table__row"> <td class="govuk-table__cell"> Rachel Silver </td> <td class="govuk-table__cell"> <strong class="govuk-tag govuk-tag--blue"> New </strong> </td> </tr> <tr class="govuk-table__row"> <td class="govuk-table__cell"> Laura Frith </td> <td class="govuk-table__cell"> <strong class="govuk-tag govuk-tag--blue"> New </strong> </td> </tr> <tr class="govuk-table__row"> <td class="govuk-table__cell"> Paul French </td> <td class="govuk-table__cell"> <strong class="govuk-tag govuk-tag--blue"> New </strong> </td> </tr> <tr class="govuk-table__row"> <td class="govuk-table__cell"> Jesse Smith </td> <td class="govuk-table__cell"> <strong class="govuk-tag govuk-tag--blue"> New </strong> </td> </tr> <tr class="govuk-table__row"> <td class="govuk-table__cell"> Rachael Pepper </td> <td class="govuk-table__cell"> <strong class="govuk-tag govuk-tag--green"> Finished </strong> </td> </tr> <tr class="govuk-table__row"> <td class="govuk-table__cell"> Emma Tennant </td> <td class="govuk-table__cell"> <strong class="govuk-tag govuk-tag--yellow"> Waiting on </strong> </td> </tr> </tbody> </table></code></pre> </div> </div> <div class="app-tabs__heading js-tabs__heading"><a class="app-tabs__heading-link" href="#coloured-tags-tag-example-nunjucks" aria-controls="coloured-tags-tag-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></div> <div class="app-tabs__container js-tabs__container" id="coloured-tags-tag-example-nunjucks" role="tabpanel"> <details class="govuk-details app-options" id="options-coloured-tags-tag-example-details"> <summary class="govuk-details__summary"> Nunjucks macro options </summary> <div class="govuk-details__text"> Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text. Some options are required for the macro to work; these are marked as “Required” in the option description. If you’re using Nunjucks macros in production with “html” options, or ones ending with “html”, you must sanitise the HTML to protect against <a href="https://developer.mozilla.org/en-US/docs/Glossary/Cross-site_scripting">cross-site scripting exploits</a>. <table class="govuk-table app-options__table" id="options-coloured-tags-tag-example--primary"> <caption class="govuk-table__caption govuk-heading-m govuk-visually-hidden">Primary options</caption> <thead class="govuk-table__head"> <tr class="govuk-table__row"> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th> <th class="govuk-table__header" scope="col">Description</th> </tr> </thead> <tbody class="govuk-table__body"> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">text</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Required. If <code>html</code> is set, this is not required. Text to use within the tag component. If <code>html</code> is provided, the <code>text</code> option will be ignored. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">html</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Required. If <code>text</code> is set, this is not required. HTML to use within the tag component. If <code>html</code> is provided, the <code>text</code> option will be ignored. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">classes</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Classes to add to the tag. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">attributes</th> <td class="govuk-table__cell">object</td> <td class="govuk-table__cell"> HTML attributes (for example data attributes) to add to the tag. </td> </tr> </tbody> </table> </div> </details> <div class="app-example__code" data-module="app-copy"> <pre><code data-module="app-scroll-container" tabindex="0" class="language-njk">{%- from "govuk/components/tag/macro.njk" import govukTag -%} <table class="govuk-table"> <thead class="govuk-table__head"> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="col"> Application </th> <th class="govuk-table__header" scope="col"> Status </th> </tr> </thead> <tbody class="govuk-table__body"> <tr class="govuk-table__row"> <td class="govuk-table__cell"> Joshua Wessel </td> <td class="govuk-table__cell"> {{govukTag({ text: "Urgent", classes: "govuk-tag--red" })}} </td> </tr> <tr class="govuk-table__row"> <td class="govuk-table__cell"> Rachel Silver </td> <td class="govuk-table__cell"> {{govukTag({ text: "New", classes: "govuk-tag--blue" })}} </td> </tr> <tr class="govuk-table__row"> <td class="govuk-table__cell"> Laura Frith </td> <td class="govuk-table__cell"> {{govukTag({ text: "New", classes: "govuk-tag--blue" })}} </td> </tr> <tr class="govuk-table__row"> <td class="govuk-table__cell"> Paul French </td> <td class="govuk-table__cell"> {{govukTag({ text: "New", classes: "govuk-tag--blue" })}} </td> </tr> <tr class="govuk-table__row"> <td class="govuk-table__cell"> Jesse Smith </td> <td class="govuk-table__cell"> {{govukTag({ text: "New", classes: "govuk-tag--blue" })}} </td> </tr> <tr class="govuk-table__row"> <td class="govuk-table__cell"> Rachael Pepper </td> <td class="govuk-table__cell"> {{govukTag({ text: "Finished", classes: "govuk-tag--green" })}} </td> </tr> <tr class="govuk-table__row"> <td class="govuk-table__cell"> Emma Tennant </td> <td class="govuk-table__cell"> {{govukTag({ text: "Waiting on", classes: "govuk-tag--yellow" })}} </td> </tr> </tbody> </table></code></pre> </div> </div> </div> <div class="app-wcag-note" id="wcag-tag-no-dragging-reorder" role="note"> WCAG 2.2 Any implementation of the Tag component that allows the user to change the order of tags must offer a way to do so without relying on ‘click and drag’ movements. This is to comply with <a href="https://www.w3.org/WAI/WCAG22/Understanding/dragging-movements.html">WCAG 2.2 success criterion 2.5.7 Dragging movements</a>. </div> <h2 id="using-colour-with-tags">Using colour with tags</h2> 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 <code>govuk-tag--red</code> 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. This is to <a href="https://www.w3.org/WAI/WCAG22/Understanding/use-of-color.html">meet WCAG 2.2 success criterion 1.4.1 Use of colour</a>. <h3 id="additional-colours">Additional colours</h3> If you need more tag colours, you can use the following colours. <div class="app-example-wrapper" id="all-tag-colours-tag-example" data-module="app-tabs"> <div class="app-example app-example--tabs"> <div class="app-example__toolbar"> <a class='app-example__new-window' href='/components/tag/all-colours/' target='_blank'> Open this example in a new tab: all tag colours – tag </a> </div> <iframe title="All tag colours – Tag example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable" src="/components/tag/all-colours/index.html" loading="lazy"></iframe> </div> <ul class="app-tabs" role="tablist"> <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#all-tag-colours-tag-example-html" role="tab" aria-controls="all-tag-colours-tag-example-html" data-track="tab-html">HTML</a></li> <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#all-tag-colours-tag-example-nunjucks" role="tab" aria-controls="all-tag-colours-tag-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li> </ul> <div class="app-tabs__heading js-tabs__heading"><a href="#all-tag-colours-tag-example-html" aria-controls="all-tag-colours-tag-example-html" data-track="tab-html">HTML</a></div> <div class="app-tabs__container js-tabs__container" id="all-tag-colours-tag-example-html" role="tabpanel"> <div class="app-example__code" data-module="app-copy"> <pre><code data-module="app-scroll-container" tabindex="0" class="language-html"><table class="govuk-table"> <thead class="govuk-table__head"> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="col"> Class name </th> <th class="govuk-table__header" scope="col"> Tag </th> </tr> </thead> <tbody class="govuk-table__body"> <tr class="govuk-table__row"> <td class="govuk-table__cell"> <code> govuk-tag--grey </code> </td> <td class="govuk-table__cell"> <strong class="govuk-tag govuk-tag--grey"> Inactive </strong> </td> </tr> <tr class="govuk-table__row"> <td class="govuk-table__cell"> <code> govuk-tag--green </code> </td> <td class="govuk-table__cell"> <strong class="govuk-tag govuk-tag--green"> New </strong> </td> </tr> <tr class="govuk-table__row"> <td class="govuk-table__cell"> <code> govuk-tag--turquoise </code> </td> <td class="govuk-table__cell"> <strong class="govuk-tag govuk-tag--turquoise"> Active </strong> </td> </tr> <tr class="govuk-table__row"> <td class="govuk-table__cell"> <code> govuk-tag--blue </code> </td> <td class="govuk-table__cell"> <strong class="govuk-tag govuk-tag--blue"> Pending </strong> </td> </tr> <tr class="govuk-table__row"> <td class="govuk-table__cell"> <code> govuk-tag--light-blue </code> </td> <td class="govuk-table__cell"> <strong class="govuk-tag govuk-tag--light-blue"> In progress </strong> </td> </tr> <tr class="govuk-table__row"> <td class="govuk-table__cell"> <code> govuk-tag--purple </code> </td> <td class="govuk-table__cell"> <strong class="govuk-tag govuk-tag--purple"> Received </strong> </td> </tr> <tr class="govuk-table__row"> <td class="govuk-table__cell"> <code> govuk-tag--pink </code> </td> <td class="govuk-table__cell"> <strong class="govuk-tag govuk-tag--pink"> Sent </strong> </td> </tr> <tr class="govuk-table__row"> <td class="govuk-table__cell"> <code> govuk-tag--red </code> </td> <td class="govuk-table__cell"> <strong class="govuk-tag govuk-tag--red"> Rejected </strong> </td> </tr> <tr class="govuk-table__row"> <td class="govuk-table__cell"> <code> govuk-tag--orange </code> </td> <td class="govuk-table__cell"> <strong class="govuk-tag govuk-tag--orange"> Declined </strong> </td> </tr> <tr class="govuk-table__row"> <td class="govuk-table__cell"> <code> govuk-tag--yellow </code> </td> <td class="govuk-table__cell"> <strong class="govuk-tag govuk-tag--yellow"> Delayed </strong> </td> </tr> </tbody> </table></code></pre> </div> </div> <div class="app-tabs__heading js-tabs__heading"><a class="app-tabs__heading-link" href="#all-tag-colours-tag-example-nunjucks" aria-controls="all-tag-colours-tag-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></div> <div class="app-tabs__container js-tabs__container" id="all-tag-colours-tag-example-nunjucks" role="tabpanel"> <details class="govuk-details app-options" id="options-all-tag-colours-tag-example-details"> <summary class="govuk-details__summary"> Nunjucks macro options </summary> <div class="govuk-details__text"> Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text. Some options are required for the macro to work; these are marked as “Required” in the option description. If you’re using Nunjucks macros in production with “html” options, or ones ending with “html”, you must sanitise the HTML to protect against <a href="https://developer.mozilla.org/en-US/docs/Glossary/Cross-site_scripting">cross-site scripting exploits</a>. <table class="govuk-table app-options__table" id="options-all-tag-colours-tag-example--primary"> <caption class="govuk-table__caption govuk-heading-m govuk-visually-hidden">Primary options</caption> <thead class="govuk-table__head"> <tr class="govuk-table__row"> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th> <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th> <th class="govuk-table__header" scope="col">Description</th> </tr> </thead> <tbody class="govuk-table__body"> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">text</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Required. If <code>html</code> is set, this is not required. Text to use within the tag component. If <code>html</code> is provided, the <code>text</code> option will be ignored. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">html</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Required. If <code>text</code> is set, this is not required. HTML to use within the tag component. If <code>html</code> is provided, the <code>text</code> option will be ignored. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">classes</th> <td class="govuk-table__cell">string</td> <td class="govuk-table__cell"> Classes to add to the tag. </td> </tr> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="row">attributes</th> <td class="govuk-table__cell">object</td> <td class="govuk-table__cell"> HTML attributes (for example data attributes) to add to the tag. </td> </tr> </tbody> </table> </div> </details> <div class="app-example__code" data-module="app-copy"> <pre><code data-module="app-scroll-container" tabindex="0" class="language-njk">{%- from "govuk/components/tag/macro.njk" import govukTag -%} <table class="govuk-table"> <thead class="govuk-table__head"> <tr class="govuk-table__row"> <th class="govuk-table__header" scope="col"> Class name </th> <th class="govuk-table__header" scope="col"> Tag </th> </tr> </thead> <tbody class="govuk-table__body"> <tr class="govuk-table__row"> <td class="govuk-table__cell"> <code> govuk-tag--grey </code> </td> <td class="govuk-table__cell"> {{govukTag({ text: "Inactive", classes: "govuk-tag--grey" })}} </td> </tr> <tr class="govuk-table__row"> <td class="govuk-table__cell"> <code> govuk-tag--green </code> </td> <td class="govuk-table__cell"> {{govukTag({ text: "New", classes: "govuk-tag--green" })}} </td> </tr> <tr class="govuk-table__row"> <td class="govuk-table__cell"> <code> govuk-tag--turquoise </code> </td> <td class="govuk-table__cell"> {{govukTag({ text: "Active", classes: "govuk-tag--turquoise" })}} </td> </tr> <tr class="govuk-table__row"> <td class="govuk-table__cell"> <code> govuk-tag--blue </code> </td> <td class="govuk-table__cell"> {{govukTag({ text: "Pending", classes: "govuk-tag--blue" })}} </td> </tr> <tr class="govuk-table__row"> <td class="govuk-table__cell"> <code> govuk-tag--light-blue </code> </td> <td class="govuk-table__cell"> {{ govukTag({ text: "In progress", classes: "govuk-tag--light-blue" }) }} </td> </tr> <tr class="govuk-table__row"> <td class="govuk-table__cell"> <code> govuk-tag--purple </code> </td> <td class="govuk-table__cell"> {{govukTag({ text: "Received", classes: "govuk-tag--purple" })}} </td> </tr> <tr class="govuk-table__row"> <td class="govuk-table__cell"> <code> govuk-tag--pink </code> </td> <td class="govuk-table__cell"> {{govukTag({ text: "Sent", classes: "govuk-tag--pink" })}} </td> </tr> <tr class="govuk-table__row"> <td class="govuk-table__cell"> <code> govuk-tag--red </code> </td> <td class="govuk-table__cell"> {{govukTag({ text: "Rejected", classes: "govuk-tag--red" })}} </td> </tr> <tr class="govuk-table__row"> <td class="govuk-table__cell"> <code> govuk-tag--orange </code> </td> <td class="govuk-table__cell"> {{govukTag({ text: "Declined", classes: "govuk-tag--orange" })}} </td> </tr> <tr class="govuk-table__row"> <td class="govuk-table__cell"> <code> govuk-tag--yellow </code> </td> <td class="govuk-table__cell"> {{govukTag({ text: "Delayed", classes: "govuk-tag--yellow" })}} </td> </tr> </tbody> </table></code></pre> </div> </div> </div> <h2 id="research-on-this-component">Research on this component</h2> The Department for Education contributed the coloured tags. They’re being used in: <ul> <li>apply for teacher training (used by citizens)</li> <li>manage teacher training applications (used by teacher training providers)</li> </ul> The tag component previously used uppercase bold text for the tags. This was changed as some research has shown that uppercase text can be harder to read, particularly for longer tag text. The tag component previously used white text on a dark coloured background. Research from multiple teams found that some users perceived these as buttons and tried to click on them. The design was changed to try and avoid this, by using a lighter background colour and darker text. </div> <h2 class="govuk-heading-l govuk-!-padding-top-7" id="help-improve-this-page">Help improve this component</h2> To help make sure that this page is useful, relevant and up to date, you can: <ul class="govuk-list govuk-list--bullet"> <li> take part in the <a class="govuk-link app-contact-panel__link" href="https://github.com/alphagov/govuk-design-system-backlog/issues/62"> ‘Tag’ discussion on GitHub </a> and share your research </li> <li> <a class="govuk-link app-contact-panel__link" href="https://github.com/alphagov/govuk-design-system/edit/main/src/components/tag/index.md">propose a change on GitHub</a> – read more about <a class="govuk-link app-contact-panel__link" href="/community/propose-a-content-change-using-github/"> how to propose changes in GitHub </a> </li> </ul> <div class="app-contact-panel"> <h2 class="app-contact-panel__heading">Need help?</h2> If you’ve got a question about the GOV.UK Design System, <a class="govuk-link" href="/get-in-touch/">contact the team</a>. </div> </main> </div> <div class="app-back-to-top app-back-to-top--hidden" data-module="app-back-to-top"> <a class="govuk-link govuk-link--no-visited-state app-back-to-top__link" href="#top"> <svg role="presentation" focusable="false" class="app-back-to-top__icon" xmlns="http://www.w3.org/2000/svg" width="13" height="17" viewBox="0 0 13 17"> <path fill="currentColor" d="M6.5 0L0 6.5 1.4 8l4-4v12.7h2V4l4.3 4L13 6.4z"></path> </svg>Back to top </a> </div> </div> <footer class="govuk-footer app-footer"> <div class="govuk-width-container app-width-container"> <div class="govuk-footer__meta"> <div class="govuk-footer__meta-item govuk-footer__meta-item--grow"> <h2 class="govuk-visually-hidden">Support links</h2> <ul class="govuk-footer__inline-list"> <li class="govuk-footer__inline-list-item"> <a class="govuk-footer__link" href="/accessibility-statement/"> Accessibility statement </a> </li> <li class="govuk-footer__inline-list-item"> <a class="govuk-footer__link" href="/sitemap/"> Sitemap </a> </li> <li class="govuk-footer__inline-list-item"> <a class="govuk-footer__link" href="/cookies/"> Cookies </a> </li> <li class="govuk-footer__inline-list-item"> <a class="govuk-footer__link" href="/privacy-policy/"> Privacy </a> </li> </ul> <div class="govuk-footer__meta-custom"> Built by the <a href="/design-system-team/" class="govuk-footer__link">GOV.UK Design System team</a> </div> <svg aria-hidden="true" focusable="false" class="govuk-footer__licence-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 483.2 195.7" height="17" width="41" > <path fill="currentColor" d="M421.5 142.8V.1l-50.7 32.3v161.1h112.4v-50.7zm-122.3-9.6A47.12 47.12 0 0 1 221 97.8c0-26 21.1-47.1 47.1-47.1 16.7 0 31.4 8.7 39.7 21.8l42.7-27.2A97.63 97.63 0 0 0 268.1 0c-36.5 0-68.3 20.1-85.1 49.7A98 98 0 0 0 97.8 0C43.9 0 0 43.9 0 97.8s43.9 97.8 97.8 97.8c36.5 0 68.3-20.1 85.1-49.7a97.76 97.76 0 0 0 149.6 25.4l19.4 22.2h3v-87.8h-80l24.3 27.5zM97.8 145c-26 0-47.1-21.1-47.1-47.1s21.1-47.1 47.1-47.1 47.2 21 47.2 47S123.8 145 97.8 145" /> </svg> All content is available under the <a class="govuk-footer__link" href="https://www.nationalarchives.gov.uk/doc/open-government-licence/version/3/" rel="license" >Open Government Licence v3.0</a>, except where otherwise stated </div> <div class="govuk-footer__meta-item"> <a class="govuk-footer__link govuk-footer__copyright-logo" href="https://www.nationalarchives.gov.uk/information-management/re-using-public-sector-information/uk-government-licensing-framework/crown-copyright/" > © Crown copyright </a> </div> </div> </div> </footer> <script type="module" src="/javascripts/application-f59bf1e64302757cb67086172d7d4999.js"></script> </body> </html>

CINXE.COM

Tag – GOV.UK Design System