Tag

Read more about the tag component on the Gov.UK Design System website

Open this example in a new tab

@using GovUkDesignSystemDotNet

@await Html.GovUkTag(new TagViewModel
{
    HtmlOrText = new HtmlOrText("Completed")
})

Options

Options for TagViewModel

Name	Type	Description
HtmlOrText	HtmlOrText	Required. HTML or text to use within the tag component.
Classes	List<string>	Classes to add to the tag.
Attributes	Dictionary<string, string>	HTML attributes (for example, data attributes) to add to the tag.

Examples

Using colour with tags

Open this example in a new tab

@using GovUkDesignSystemDotNet

@await Html.GovUkTag(new TagViewModel
{
    HtmlOrText = new HtmlOrText("This uses govuk-tag--grey"),
    Classes = ["govuk-tag--grey"],
})

@await Html.GovUkTag(new TagViewModel
{
    HtmlOrText = new HtmlOrText("This uses govuk-tag--green"),
    Classes = ["govuk-tag--green"],
})

@await Html.GovUkTag(new TagViewModel
{
    HtmlOrText = new HtmlOrText("This uses govuk-tag--turquoise"),
    Classes = ["govuk-tag--turquoise"],
})

@await Html.GovUkTag(new TagViewModel
{
    HtmlOrText = new HtmlOrText("This uses govuk-tag--blue"),
    Classes = ["govuk-tag--blue"],
})

@await Html.GovUkTag(new TagViewModel
{
    HtmlOrText = new HtmlOrText("This uses govuk-tag--light-blue"),
    Classes = ["govuk-tag--light-blue"],
})

@await Html.GovUkTag(new TagViewModel
{
    HtmlOrText = new HtmlOrText("This uses govuk-tag--purple"),
    Classes = ["govuk-tag--purple"],
})

@await Html.GovUkTag(new TagViewModel
{
    HtmlOrText = new HtmlOrText("This uses govuk-tag--pink"),
    Classes = ["govuk-tag--pink"],
})

@await Html.GovUkTag(new TagViewModel
{
    HtmlOrText = new HtmlOrText("This uses govuk-tag--red"),
    Classes = ["govuk-tag--red"],
})

@await Html.GovUkTag(new TagViewModel
{
    HtmlOrText = new HtmlOrText("This uses govuk-tag--orange"),
    Classes = ["govuk-tag--orange"],
})

@await Html.GovUkTag(new TagViewModel
{
    HtmlOrText = new HtmlOrText("This uses govuk-tag--yellow"),
    Classes = ["govuk-tag--yellow"],
})