Usage
Tags are used to categorize or label content. They can contain text, icons, and be closable.
React
TypeScript
New
Tag
Tag component for categorizing and labeling content with various styles and interactive features.
Playground
Experiment with all the properties of the Tag component in real time.
Properties
text
Text to display in the tag.
color
Color scheme of the tag.
variant
Visual style of the tag.
size
Size of the tag.
radius
Border radius of the tag.
Tag
Variants
Tag supports five variants: solid, soft, outline, dashed, and subtle.
Solid
Soft
Outline
Dashed
Subtle
Colors
Tags come in various colors to communicate different states or categories.
Neutral
Primary
Secondary
Success
Warning
Danger
Info
Sizes
Available in four sizes: tiny, small, medium, and large.
Tiny
Small
Medium
Large
With Icons
You can add icons to tags using the icon prop.
Label
Approved
Warning
Info
Closable Tags
Add the onClose prop to make a tag closable.
Closable
Removable
Tag Props
Props
Prop | Default | Type |
|---|---|---|
text | undefined | string |
icon | undefined | React.ReactNode |
onClose | undefined | () => void |
variant | "soft" | "solid" | "soft" | "outlined" | "ghost" |
color | "neutral" | "neutral" | "primary" | "secondary" | "success" | "danger" | "warning" | "info" |
size | "medium" | "tiny" | "small" | "medium" | "large" |
radius | "medium" | "none" | "tiny" | "small" | "medium" | "large" | "full" |