Tag
DisplayA compact label chip for categories, filters, or statuses. Optional remove button.
Playground
Design System
Controls
Color variant.
Tag size.
Show remove button.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
variant | 'default' | 'primary' | 'success' | 'danger' | 'warning' | 'info' | 'default' | Color scheme. |
size | 'sm' | 'md' | 'lg' | 'md' | Tag size. |
removable | boolean | false | Show remove (×) button. |
disabled | boolean | false | Disable remove button. |
Examples
Default
Default
vue
<DsTag variant="default">
Default
</DsTag>Primary
Primary
vue
<DsTag variant="primary">
Primary
</DsTag>Success
Success
vue
<DsTag variant="success">
Success
</DsTag>Danger
Danger
vue
<DsTag variant="danger">
Danger
</DsTag>Warning
Warning
vue
<DsTag variant="warning">
Warning
</DsTag>Info
Info
vue
<DsTag variant="info">
Info
</DsTag>Removable
Removable tag
vue
<DsTag
variant="primary"
removable
>
Removable tag
</DsTag>Skeleton
Use DsTagSkeleton as a loading placeholder while content is being fetched.
3 tags
vue
<DsTagSkeleton :count="3" />5 tags
vue
<DsTagSkeleton :count="5" />Accessibility
- Remove button has aria-label="Remove".
- Slot content is the accessible text.