Chip

Small label with tone, variant and optional icon or remove button; size (xs, sm, md, lg, xl) sets density.

Jump to API reference

Import

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

Tones

BrandSkyConfirmedPendingCancelledDraft
Vue
<UiChip tone="brand">
  Brand
</UiChip>

<UiChip tone="sky">
  Sky
</UiChip>

<UiChip tone="success">
  Confirmed
</UiChip>

<UiChip tone="warning">
  Pending
</UiChip>

<UiChip tone="danger">
  Cancelled
</UiChip>

<UiChip tone="neutral">
  Draft
</UiChip>

With icon

Visa readyFlight included
Vue
<UiChip tone="success" icon="check">
  Visa ready
</UiChip>

<UiChip tone="sky" icon="plane" pill>
  Flight included
</UiChip>

Sizes

XSSMMDLGXL
Vue
<UiChip tone="brand" size="xs">
  XS
</UiChip>

<UiChip tone="brand" size="sm">
  SM
</UiChip>

<UiChip tone="brand" size="md">
  MD
</UiChip>

<UiChip tone="brand" size="lg">
  LG
</UiChip>

<UiChip tone="brand" size="xl">
  XL
</UiChip>

API reference

Compact label with optional icon and remove button; use for statuses, filters and attributes.

Props

PropType and valuesDefaultDescription
varianttonaloutlinedsolid'tonal'Visual style.
tonebrandskysuccesswarningdangerneutral'brand'Accent color. Unknown values fall back to brand.
sizexssmmdlgxl'md'Chip height: xs 22px, sm 26px, md 32px, lg 38px, xl 46px.
pillbooleanfalseFully rounded corners.
iconstring—Icon shown before the label.

Slots

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

defaultChip label.

Events

Vue: @name. React: onName.

closeCanonical. Called when the remove button is clicked. The button is shown only when close or remove is provided.
removeAlias of close, matching Tag.