components icon

Tag

Tags are small, interactive labels used to visually group, classify, or filter criteria.

Status

PublishedElement can be used in production
Adobe XD
Adobe XD Kit
In backlogElement is in backlog
PublishedElement can be used in production
Web Components
In backlogElement is in backlog
React
React
In backlogElement is in backlog
Angular
Angular
In backlogElement is in backlog
Documentation
PublishedElement can be used in production

What's new

Tag is a new component for the Dell Design System v2. It incorporates the updated foundations, including the new font ramp and color palette.

When to use

Tags and badges are visually similar, but tags are interactive and badges are not.

ComponentUse case
TagUse tags to allow users to group, sort, or filter information. Tags frequently contain keywords or metadata. They provide quick access to specific categories and support content classification and navigation.
BadgeUse badges as read-only status indicators or labels. Badges can be displayed in groups or individually, and express meaning through color and text.

Anatomy

The parts of a tag, labeled 1 through 4.

Tags have four main elements. The tag container and tag label are required, whereas the icon and dismiss icon are optional.

  1. Tag container: primary element that holds content, color, and icons.
  2. Icon: optional leading icon.
  3. Tag label: short, descriptive text describing the tag.
  4. Dismiss icon: optional icon to close the tag.