Interactive tag: final spec

[laurenmrice]

Acceptance criteria

Final spec

• Create final design spec for Interactive tag and its counterparts (Selectable, Dismissable, Navigational)
• Playback to design and a11y team. Figma File (Design specs page)
• Add any suggestions if needed from playback. Figma File (Final specs page)

[github-actions]

Thank you for submitting a feature request. Your proposal is open and will soon be triaged by the Carbon team.

If your proposal is accepted and the Carbon team has bandwidth they will take on the issue, or else request you or other volunteers from the community to work on this issue.

[laurenmrice]

Feedback from playback

Icons in tags

• Do not use a checkmark icon for the selected state in Selectable tags.
  • If needed we can always revisit this pattern for selection in the future if it is a crucial ask.
• Do not use decorative icons in the Small size (18px) tag.
• We have also seen teams, like Security, use status indicators inside of tags in cards, so this is another reason to advocate for icons in tags.

Focus states

• Use the 2px thick stroke for the focus state with a 1px space between the tag and the focus border for all tag variants that receive focus. (*Except for Dismissable tag)
  • Helps create more breathing room for the Small tag size.
  • Helps differentiate between high contrast and outline tags.

Tag border colors

• Selectable tag: high contrast border
• Navigational tag: 40 border for light themes, 50 border for dark themes in all colors.
  • Remove high contrast and outline tag options from Navigational tag.

Active states

• No active state for the Selectable or Navigational tags.


[laurenmrice]

To dos

In context image examples

• Create a couple use case examples per tag variant to make sure they are working properly within a real layout.

AI considerations

• Do a quick mock of how the new variants would apply to AI situations to conclude they work well.

Enabled/Hover state visual differences between Selectable/Navigational tag

• Providing a tooltip that says "View more" on the hover state for Navigational tag could help this problem. We could keep this as an optional prop
  • Gower question: Do we need to visually distinguish between the two more so users are better prepared to expect what will happen if they click on the tag. Could not be a huge deal, but nice to explore a scenario if possible.

Large 32px size tag

• Confirm what the use cases are:
  • More screen real-estate at your disposal, usually used on a large page rather than in condensed or inline spaces.
  • Used when its more of the focal point of the page and primary task.
  • Larger click target area
  • Can be placed next to form components that are also 32px in height. We currently do not have 24px height form components other than Button.

Better name for "Navigational" tag?

• Any other names that would be better? We do not want to encourage tags to be used as links to take you to new pages or launch new tabs. The term navigational could be misleading in that regard. Possible alternative names could be:
  • Operational tag
  • Actionable tag
  • View more tag
  • Details tag
  • Dynamic tag
  • Contextual tag
  • Structural tag

[laurenmrice]

Final Interactive tag designs

Selectable tag

---

Operational tag