Tags

Overview

Tags focus on data, not content, with two distinct use cases:

• On an item, default tags expose the item’s attributes.
• On a list, dismissible or removable tags reveal which filters are active.

Design and Layout

Tags should be placed in a tag group to control spacing and wrapping.

Default

A default tag describes an item using its metadata attributes, such as category, location, or topic.

Dismissible vs. Removable

A dismissible tag may represent the type of filter (e.g., “Fund”) or the specific value of that filter (e.g., “ACAM”, “CAF II”, or “RBE”).

Dismissible tags and removable tags are nearly identical, except for their behavior upon dismissal:

• A removable tag disappears entirely from the Document Object Model (DOM) when dismissed.
• A dismissible tag remains hidden within the DOM after dismissal and can be restored later.

Dos and Don’ts

Do

• Do use tags for a filtered list to provide users with a clear summary of active filter attributes or to enable them to remove individual attributes.

Don't

• Don't use tags for data attributes exceeding 25 characters; instead, consider listing attributes in a data table or bulleted list.
• Don't use tags for editorial descriptions.

Accessibility

• When using this Vue component, developers do not need to implement any accessible affordances, since they are built in.
  • The tag label is expressed in plain text.
  • The tag dismiss control is rendered in button markup, invoking all the accessibility hooks of a native markup, such as keyboard control and a clear focus state.
  • The tag dismiss control has aria-label=“Remove this tag”, to clarify the action it performs. This default label can be changed.
• Non-Vue developers should use the same markup to achieve the same level of accessibility.

Installation

Props

Slots