Tag Properties
Versatile UI elements for displaying metadata, categories, or labels with default and stroke variants. Supports disabled states and can be styled to match your design system.
Installation
Install the following dependencies
Run these commands in your terminal to install the required packages
Create or update your tag component
Copy this code to create your tag component
Test Your Component
- 1. Add the component to a test page
- 2. Check all props and variants work as expected
- 3. Verify responsive behavior
- 4. Test with different content/data
- 5. Ensure accessibility features work correctly
Stroke
Stroke variant provides an outlined appearance for more subtle visual presence.
Disabled
Disabled tags appear visually muted and cannot be interacted with.
With Icons
Icons can be added to tags to provide additional visual context.
With Dismissable
Add a dismiss button to enable users to remove tags from the interface.
With Image
Tags can include avatar images for user-related information or profile indicators.
API Reference
The Tag component provides a flexible way to display metadata, categories, or labels in your interface. It uses Radix UI's Slot primitive to enable composition through a slot pattern.
Tag.Root
Main tag component with support for different variants and colors. Uses Radix UI's Slot primitive when asChild prop is true.
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "default""stroke" | "default" | Visual style variant of the tag |
color | "neutral""blue""green""red""yellow""purple""orange" | "neutral" | Color theme of the tag |
disabled | "boolean" | "false" | Whether the tag is disabled |
className | "string" | "undefined" | Additional CSS classes |
asChild | "boolean" | "false" | When true, component will render as a child using Radix UI Slot |
Tag.Icon
Adds an icon to the tag for additional visual context.
| Prop | Type | Default | Description |
|---|---|---|---|
as | "ReactElement" | "undefined" | Icon component to render |
Tag.Dismiss
Adds a dismiss button to the tag for removal functionality. Uses Radix UI's Slot primitive when asChild prop is true.
| Prop | Type | Default | Description |
|---|---|---|---|
onDismiss | "function" | "undefined" | Callback function triggered when dismiss button is clicked |
asChild | "boolean" | "false" | When true, component will render as a child using Radix UI Slot |
Tag.Image
Adds an avatar image to the tag, typically for user-related information.
| Prop | Type | Default | Description |
|---|---|---|---|
src | "string" | "required" | URL of the image to display |
alt | "string" | "required" | Alternative text for the image |