Tag

Data Display

Label component with removal functionality, color variants, and icon support

Basic Usage

Default TagLabel TagTechnologyDesignDevelopment

Variants

DefaultPrimarySecondaryAccentSuccessWarningErrorInfoOutlineGhostGlass

Sizes

SmallMediumLarge

With Icons

FeaturedFavoriteFastVerifiedInfo

Removable

ReactTypeScriptTailwind CSSVite

Tag Groups

Default spacing with wrapping

JavaScriptTypeScriptReactVueAngularSvelte

Maximum 4 tags (shows "+2 more")

Node.jsExpressNestJSFastify+2 more

Usage Guidelines

When to Use

  • Labels
  • Categories
  • Removable tags

Accessibility

  • Removal announced
  • Group semantics when multiple

Performance

  • CSS-only styling
  • Efficient close handler

Common Mistakes

  • Using for status (use Badge)
  • No visual distinction between tags

Frequently Asked Questions

Tag is simpler with just label and removal. Chip has more variants and interactivity.
Yes, Tag supports optional close button for removal.

View on GitHub

See the full source code on GitHub

Related Components

View all
Accordion

Collapsible content sections with single/multiple expansion modes, animation, and keyboard navigation

Avatar

User avatar with image loading, fallback text generation, status indicators, and shape variants

AvatarGroup

Stacked avatar display with overflow handling, max count configuration, and hover expansion

Badge

Status indicator with variant system, dot mode, positioning, and pulsing animation support

Previous

Table

Next

Timeline