Interactive Tag

🧭 When to Use an Interactive Tag

Use an Interactive Tag when:

• Users need to select, filter, or activate a category

• You want to represent multiple selectable items in a compact way

• You’re creating a token-based input (e.g., skill selection, topic filters)

Avoid using Interactive Tags when no interaction is needed—use static Tags or Badges in those cases.

🎨 Types

• Default – Standard, neutral tag with light styling

• Filled – High-contrast background to indicate active or selected state

• Check – Includes a check icon when selected; reinforces clear visual feedback for active filters or multi-select chips

Each type is designed to give clear feedback and can be toggled visually between selected and unselected.

📏 Sizes

• Default – System standard for general use

• Medium (md) – Slightly larger for dashboards or emphasis in feature sections

• Large (lg) – High-visibility tag, typically used in search UIs or horizontally scrollable filters

Size affects padding, corner radius, type scale, and icon alignment.

✨ Behavior

Interactive Tags can be:

• Toggled on/off to represent selected state

• Used in groups for multi-select filters

• Swapped between default and check-type dynamically as user selects/unselects

Variants in Figma allow you to simulate these states visually.

♿ Accessibility Considerations

From a design perspective:

• Make sure selected and unselected states have strong visual contrast

• Don’t rely solely on the check icon—use fill or outline to reinforce state

From a code perspective (if implemented):

• Use role="button" or role="checkbox" if toggleable

• Add aria-pressed="true/false" for selection

• Provide aria-label for clarity if the tag text is short or ambiguous

✅ Best Practices

• Keep tag content short — 1–2 words max

• Use consistent styling within a set (don’t mix filled + default unless for selected state)

• Only show the check icon on selected tags — it should serve as confirmation

• Use horizontal scroll or wrap when using many tags in a group

• Tags should look interactive (cursor, hover/focus states)