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 Light-blue Red Purple Pink Orange Yellow).each do |colour|
  = govuk_tag(text: colour, colour: colour.downcase)

<% %w(Grey Green Turquoise Blue Light-blue Red Purple Pink Orange Yellow).each do |colour|
 %>
<%= govuk_tag(text: colour, colour: colour.downcase) %>
<% end %>

Output

Grey Green Turquoise Blue Light-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--light-blue">
  Light-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>