Tag
Used for marking and selection.
Basic Usage
Use the type property to define the tag's type.
Theme Effects
The Tag component provides three theme effects: dark, light (default), and plain.
Closable Tags
Use the closable property to define a closable tag. Clicking the close button triggers the close event.
Dynamic Editing
Dynamic editing can be implemented by responding to the close event triggered when a tag's close button is clicked.
Checkable Tags
Use the checkable property to define a tag that can be selected, paired with v-model:checked.
Selection Status: [ true, false, false ]
Different Sizes
Use the size property to control the tag's dimensions.
Round Tags
Use the round property to make the tag circular/round.
Custom Colors
Use the color property to customize the tag's background color.
Icon Configuration
Use the icon property or #icon slot for the left icon, and the suffix-icon property or #suffixIcon slot for the right icon.
Usage in Nuxt
The Tag component fully supports SSR in Nuxt 3/4. Its lightweight design makes it ideal for status display and categorization in Nuxt projects.
SSR Considerations:
- ✅ All types, sizes, and effects generate HTML offline on the server.
- ✅ Custom colors and rounded corners are supported in SSR.
- ✅ Icon slots (prefix and suffix) are correctly filled on the server.
- 💡 Interactions (like closing or editing) become active after client-side hydration.
Ultra Lightweight
The CSS for the Tag component is highly optimized/atomic, adding minimal style overhead to SSR pages, making it an ideal choice for performance-focused Nuxt apps.
API
Props
| Name | Description | Type | Default |
|---|---|---|---|
| type | Tag type | 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'primary' |
| size | Tag size | 'large' | 'default' | 'small' | 'default' |
| effect | Theme effect | 'dark' | 'light' | 'plain' | 'light' |
| closable | Whether the tag is closable | boolean | false |
| round | Whether the tag has rounded corners | boolean | false |
| color | Custom background color | string | — |
| hit | Whether the tag has a border stroke | boolean | false |
| disable-transitions | Compatibility prop. The current template and stylesheet do not consume this option | boolean | false |
| checkable | Whether the tag is selectable | boolean | false |
| checked / v-model:checked | Whether the tag is currently selected | boolean | false |
| editable | Whether the tag is editable (double-click to edit) | boolean | false |
| icon | Left icon. Component values render directly; string values are currently declared but not rendered by the template | string | Component | undefined |
| suffix-icon | Right icon. Component values render directly; string values are currently declared but not rendered by the template | string | Component | undefined |
| theme-overrides | Component-level theme overrides | ComponentThemeVars | undefined |
Events
| Name | Description | Parameters |
|---|---|---|
| click | Triggers when the tag is clicked | (event: MouseEvent) => void |
| close | Triggers when the close button is clicked | (event: MouseEvent) => void |
| update:checked | Triggers when selection status changes | (checked: boolean) => void |
| change | Triggers when selection status changes | (checked: boolean) => void |
| edit | Triggers when editing is completed | (value: string) => void |
Slots
| Name | Description |
|---|---|
| default | Tag content |
| icon | Custom left icon |
| suffixIcon | Custom right icon |
| closeIcon | Custom close icon |
Theme Variables
| Variable | Description | Default |
|---|---|---|
--yh-tag-bg-color | Background color | (varies by type) |
--yh-tag-border-color | Border color | (varies by type) |
--yh-tag-text-color | Text color | (varies by type) |
--yh-tag-hover-color | Accent color used by interaction states | var(--yh-color-primary) |
Other size, radius, and typography values still come from shared theme tokens such as --yh-font-size-xs, --yh-radius-sm, and --yh-radius-round.
Type Exports
| Name | Description |
|---|---|
YhTagProps | Component props type |
YhTagEmits | Component emits type |
YhTagSlots | Component slots type |
YhTagType | Tag type union |
YhTagSize | Tag size union |
YhTagEffect | Tag effect union |
YhTagInstance | Component instance type |
Expose
This component does not expose public instance methods or properties.