Tag

Introduction

We use the Tag component for navigation or toggling options. Tags are interactive and can be pre-selected, as an alternative to button group. Selected tags has a filled color based on current theme the service is using.

Variants

• Basic tag: The Basic tag is pill-shaped with a soft, casual appearance. It looks like a small pill button, making it knowable as an interactive element. the Basic tag can be used to toggle between different categories or views.
• Compact tag: The Compact tag is smaller and has less padding than the Basic tag. This variant is mostly used for categories or within tables, or other contexts where space is limited.

Interactive demo

Try the interactive demo below to explore different progress variants.

Best practices

• Short label: Use brief, concise labels or keywords. Avoid full sentences to maintain clarity and simplicity.
• Icon: Include icons when they add meaning or help users quickly recognize the tag's purpose.
• Navigation vs. toggling: Make it clear whether an element navigates to another page or toggles a setting. Add supporting text or content to help users understand the purpose of the tags.

Examples

Here are some examples of usage of the tag component:

Tags in components

Tags can be used within various components for navigation or toggling options. See the links below for more information.