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

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

Output

GreyGreenTealBlueLight-blueRedPurpleMagentaOrangeYellow

<strong class="govuk-tag govuk-tag--grey">Grey</strong><strong class="govuk-tag govuk-tag--green">Green</strong><strong class="govuk-tag govuk-tag--teal">Teal</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--magenta">Magenta</strong><strong class="govuk-tag govuk-tag--orange">Orange</strong><strong class="govuk-tag govuk-tag--yellow">Yellow</strong>