Skip to main content
  1. Home
  2. Tags

Tags

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

Default tags

Input

= govuk_tag(text: "Completed")
<%= govuk_tag(text: "Completed") %>

Output

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

Coloured tags

Input

- %w(grey green turquoise blue red purple pink orange yellow).each do |colour|
  = govuk_tag(text: colour, colour: colour)
<% %w(grey green turquoise blue red purple pink orange yellow).each do |colour|
 %>
<%= govuk_tag(text: colour, colour: colour) %>
<% end %>

Output

grey green turquoise blue red purple pink orange yellow 
<strong class="govuk-tag govuk-tag--grey">
  grey
</strong>
<strong class="govuk-tag govuk-tag--green">
  green
</strong>
<strong class="govuk-tag govuk-tag--turquoise">
  turquoise
</strong>
<strong class="govuk-tag govuk-tag--blue">
  blue
</strong>
<strong class="govuk-tag govuk-tag--red">
  red
</strong>
<strong class="govuk-tag govuk-tag--purple">
  purple
</strong>
<strong class="govuk-tag govuk-tag--pink">
  pink
</strong>
<strong class="govuk-tag govuk-tag--orange">
  orange
</strong>
<strong class="govuk-tag govuk-tag--yellow">
  yellow
</strong>

Related information