Tag

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

Status

PublishedElement can be used in production
PublishedElement can be used in production
Angular
Angular
In progressElement design and development in progress
React
React
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

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.