Tag

Tags are used to visually categorise content. They can indicate the status of an item or represent a category of information. By default, tags have a blue background and text color.

Variants

Default

<strong class="gi-tag gi-tag-info">
  Completed
</strong>

{{ govieTag({
  "text": "Completed",
  "type": "info"
}) }}

import { Tag } from '@govie-ds/react';

<Tag
  text="Completed"
  type="info"
/>

Usage

Best Practices

When to use this component

Use the tag component to visually represent the status of items, categorise content, or highlight important information. Tags are particularly useful for:

• Indicating the completion status of tasks or projects (e.g., "Completed," "In Progress").
• Categorising items in a list (e.g., labels for filtering content).
• Displaying alert messages or notifications with visual distinction.

Tags help enhance user experience by providing clear and immediate context for information.

When not to use this component

Avoid using the tag component if:

• You need to represent interactive elements or complex behaviours that go beyond simple categorisation (e.g., dropdowns or buttons).
• The information requires more detailed explanations or actions, where a more elaborate component would be appropriate.
• You need highly customised styles or intricate hover/focus effects that cannot be achieved with the default styles of the tag component.

In such cases, consider alternative UI elements that better suit your requirements.

Status