Badge

Tiny status marker or counter, optionally with a leading dot. Use size (xs, sm, md, lg, xl) to change density.

Jump to API reference

Import

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

Tones

DefaultBrandPaidPendingOverdueNew
Vue
<UiBadge>
  Default
</UiBadge>

<UiBadge tone="brand">
  Brand
</UiBadge>

<UiBadge tone="success">
  Paid
</UiBadge>

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

<UiBadge tone="danger">
  Overdue
</UiBadge>

<UiBadge tone="info">
  New
</UiBadge>

With dot

OnlineOffline
Vue
<UiBadge tone="success" dot>
  Online
</UiBadge>

<UiBadge tone="danger" dot>
  Offline
</UiBadge>

Sizes

NewNewNewNewNew
Vue
<UiBadge tone="brand" size="xs">
  New
</UiBadge>

<UiBadge tone="brand" size="sm">
  New
</UiBadge>

<UiBadge tone="brand" size="md">
  New
</UiBadge>

<UiBadge tone="brand" size="lg">
  New
</UiBadge>

<UiBadge tone="brand" size="xl">
  New
</UiBadge>

API reference

Status badge with a colored tone and optional dot.

Props

PropType and valuesDefaultDescription
tonebrandsuccesswarningdangerinfoinverse—Color. inverse is a solid high-contrast badge (dark on light themes, light on dark). Omit for the neutral style.
dotbooleanfalseShows a status dot before the content.
shapepillsquare'pill'square uses small rounded corners instead of a full pill.
sizexssmmdlgxl'md'Badge height: xs 18px, sm 20px, md 24px, lg 28px, xl 32px.

Slots

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

defaultBadge content.

Notes

  • Badge uses info for blue; Chip and Button use the tone name sky instead.