Tag

Neutral keyword tag; becomes removable when onRemove is passed. Use size (xs, sm, md, lg, xl) to change density.

Jump to API reference

Import

Vue
import { UiTag } from '@ziyarago/ui/vue'

Plain

Near HaramFamilyHalal food
Vue
<UiTag>
  Near Haram
</UiTag>

<UiTag>
  Family
</UiTag>

<UiTag>
  Halal food
</UiTag>

Sizes

Near HaramNear HaramNear HaramNear HaramNear Haram
Vue
<UiTag size="xs">
  Near Haram
</UiTag>

<UiTag size="sm">
  Near Haram
</UiTag>

<UiTag size="md">
  Near Haram
</UiTag>

<UiTag size="lg">
  Near Haram
</UiTag>

<UiTag size="xl">
  Near Haram
</UiTag>

API reference

Small pill label, optionally removable; use for keywords and selected values.

Props

PropType and valuesDefaultDescription
sizexssmmdlgxl'md'Tag height: xs 22px, sm 24px, md 28px, lg 34px, xl 40px.

Slots

Vue: named slots. React: a prop with the same name; default is children.

defaultTag label.

Events

Vue: @name. React: onName.

removeCalled when the x button is clicked. The button is shown only when remove or close is provided.
closeAlias of remove, matching Chip. Use one name across both components in your app (close is the canonical one).