@agala-labs/ui
Tag
Represents a user-applied label that may be explicitly interactive or removable.
Examples
Default
System state Active
User labelVue
Tag activations: 0<AgalaTag label="Needs review" interactive @click="filterByTag" />Import
import { AgalaTag } from '@agala-labs/ui'API
| Prop | Type | Default | Description |
|---|---|---|---|
label | string | — | Visible tag text. |
variant | 'default' | 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'outline' | 'default' | Treatment. |
size | 'sm' | 'md' | 'md' | Tag size. |
removable | boolean | false | Shows a labeled native remove button. |
interactive | boolean | false | Renders the root as a native button and enables the click event. Ignored when removable. |
disabled | boolean | false | Disables available interaction. |
color | string | — | Any valid CSS color. |
class | string | — | Consumer override class. |
Events
click — emitted only when interactiveremove
Accessibility
Choose Badge for system state/count and Tag for user-applied labels or filters. Passive tags are not focusable; removable tags expose only their labeled remove button; interactive tags use native button semantics.