Components / data-display

Tag

Compact label for categories, filters or selected values.

import { Tag } from '@basiiik/ui';

The snippet an agent gets

From get_component_snippet, with the required props filled in from the spec. Every snippet is type-checked against the library before it is shipped.

import { Tag } from '@basiiik/ui';

<Tag>Design</Tag>

• Hover is CSS and only applies to removable tags; Disabled uses the disabled prop. Enter, Space, Delete and Backspace on the remove control all remove the tag.
• Storybook: Data display/Tag.

Props

Other props

States. Hover is CSS and only applies to removable tags; Disabled uses the disabled prop. Enter, Space, Delete and Backspace on the remove control all remove the tag.

Native attributes such as className, id and data-* are forwarded to the root element.

Use it when

• Categories, applied filters, selected values that can be removed

Do not use it when

• Read-only status (use Badge)

Rules for agents

• A Tag is read-only unless onRemove is given; then it shows a remove control
• The remove control is named "Remove <label>" by default; pass removeLabel when the content is not plain text
• After a Tag is removed, move focus to the next Tag or back to the input that adds them
• Use tone="brand" for selected or applied values and "neutral" for plain categories
• tone="brand" follows the brand colour through the accent roles (color.bg.accent.*, color.border.accent, color.text.accent), which Brand Mapper turns neutral when the brand is close to error, success or warning; never use it to signal success, warning, error or info

Avoid

• Read-only status in a Tag (use Badge)
• Using a Tag as a toggle or filter button (use Chip)
• Removing a Tag that holds important data without a way to undo it
• Long text in a Tag
• Using tone="brand" as a status indicator: on a red or green brand it reads as an error or success

Writing the content

• One to three words, the name of the value
• Use sentence case unless the value is a name

Keyboard

• The remove control is the only focusable part
• Enter, Space, Delete or Backspace on the remove control removes the tag

Accessibility

• Removable tags need aria-label="Remove <label>" on the remove control

Colour tokens it reads

Related

• Badge
• Tag Input

data-display 12 Figma variants Try it in the live demo