🌏 Translated with the assistance of DeepSeek and ChatGPT
Tag
Generally used to display the features (not referring to bugs) of something.
Theme
Like buttons, tags have several different color themes: 'primary' (default), 'success', 'warning', 'danger', 'info', 'sakura' and 'notice'.
Primary
Notice
Success
Warning
Danger
Info
Sakura
Hide source code
Tag Variants
Tags also have several different style variants: 'primary' (default), 'plain', and 'outline'.
Primary
Notice
Success
Warning
Danger
Info
Sakura
Primary
Notice
Success
Warning
Danger
Info
Sakura
Primary
Notice
Success
Warning
Danger
Info
Sakura
Hide source code
Tag Sizes
Tags come in different sizes.
Small
Medium
Large
Hide source code
Rounded Borders
Tags have rounded corners.
Default
Round
[16, 8, 12, 4]
Hide source code
Close Button
Tags can have a close button.
Primary
Success
Warning
Danger
Info
Sakura
Hide source code
Disabled State
The close button is disabled when the tag is disabled.
Primary
Notice
Success
Warning
Danger
Info
Sakura
Hide source code
Custom Color
You can customize the main color. A complete color palette will be generated based on this color, which takes precedence over the preset palette provided by theme. See Supported Color Parsing.
#409EFF
#FAE13C
#E956AE
#909399
Hide source code
API
TagProps
| Attribute | Type | Optional | Default | Description | Version |
|---|---|---|---|---|---|
| borderRadius | NumberOrPercentage | NumberOrPercentage[] | True | | Border radius, takes precedence over shape, and behaves the same as CSS border-radius. A single value or an array of length 1 → applies to all four corners; array of length 2 → [top left & bottom right, top right & bottom left]; array of length 3 → [top left, top right & bottom left, bottom right]; array of length 4 → applies to each corner in clockwise order. | 0.0.2 |
| shape | 'rect' | 'round' | True | 'rect' | Tag shape. | 0.0.3 |
| size | 'medium' | 'large' | 'small' | True | 'medium' | Tag size. | 0.0.2 |
| disabled | boolean | True | false | Whether the tag is disabled. | 0.0.2 |
| variant | 'primary' | 'plain' | 'outline' | True | 'primary' | Tag style variant. | 0.0.2 |
| theme | 'primary' | 'sakura' | 'success' | 'warning' | 'danger' | 'info' | 'notice' | True | 'primary' | Tag theme. | 0.0.2 |
| color | string | True | | Custom main color. See Supported Color Parsing. | 0.0.2 |
| closable | boolean | True | | Whether the tag can be closed. | 0.0.2 |
| pollSizeChange | boolean | True | false | Enables polling for component size changes. This may impact performance. | 0.1.0 |
TagEvents
| Event | Parameter | Description | Version |
|---|---|---|---|
| close | e: MouseEvent | Close event. | 0.0.2 |
TagSlots
| Slot | Parameter | Description | Version |
|---|---|---|---|
| default | | Tag content. | 0.0.2 |
NumberOrPercentage
ts
export type NumberOrPercentage = number | `${number}%`