Tags are used to show users the status of process.
Tags make it easy to categorise and see the status of a structure. You can also add optional colours or icons to make tags more visually distinct and improve navigation.
When to use this component
Use the tag component when you need to indicate the status of an item, particularly when multiple statuses can apply. For example, tags can show whether a task is "completed" or still "in progress" within a task list component.
Tags are strictly for display purposes and should not be interactive. Avoid using tags as links or buttons, as users may not recognise them as actionable elements. To prevent confusion, ensure the names of your tags use adjectives (for example "active" or "urgent") rather than verbs, which could imply interactivity.
Tags are a clear and concise way to convey status information without overwhelming the user or introducing unnecessary actions.
Examples in GOSS products
- Hub and spoke pattern when showing users how far they are through a process
- Summary block component to highlight status
Accessibility considerations
Tags are excellent for accessibility because they provide concise status information that is easy for screen readers to identify and announce, ensuring inclusivity for users with varying abilities.
Each tag should use clear and descriptive language, allowing users to understand the status it represents at a glance. To improve accessibility, ensure sufficient contrast between the tag text and its background, and use consistent styling to maintain clarity.
Avoid making tags interactive, as this can confuse users, especially those relying on assistive technologies. Always test your tags for compatibility with screen readers to ensure they enhance, rather than hinder, the user experience.
Basic tag
A tag component with no additional configuration options keeps things simple, ensuring consistent, clear, and descriptive status information that enhances the user experience.
<span class="gi-tag">
Basic tag
</span>Additional tag styles
Tags with additional modifiers to style it for specific purposes.
Completed tag.
gi-tag gi-tag--completed
In progress tag.
gi-tag gi-tag--in-progress
Not started tag.
gi-tag gi-tag--not-started
Cannot start tag.
gi-tag gi-tag--cannot-start
In progress tag
Not started tag
Cannot start yet tag
<span class="gi-tag gi-tag--completed">Completed tag</span><br/>
<span class="gi-tag gi-tag--in-progress">In progress tag</span><br/>
<span class="gi-tag gi-tag--not-started">Not started tag</span><br/>
<span class="gi-tag gi-tag--cannot-start">Cannot start yet tag</span>Share this page
