Badge

Size variants

TinyXSSmallMediumLargeXL

<FuiBadge size="tiny">Tiny</FuiBadge>
<FuiBadge size="medium">Medium</FuiBadge>
<FuiBadge size="extra-large">XL</FuiBadge>

Appearance

FilledTintGhost

<FuiBadge appearance="filled">Filled</FuiBadge>
<FuiBadge appearance="ghost">Ghost</FuiBadge>

Colors

BrandDangerSuccessWarningSevereInfo

<FuiBadge color="brand">Brand</FuiBadge>
<FuiBadge color="success">Success</FuiBadge>

Shapes

CircularRoundedSquare

<FuiBadge shape="circular">Circular</FuiBadge>
<FuiBadge shape="square">Square</FuiBadge>

CounterBadge

Counter badge

5 99+ 0

<FuiCounterBadge :count="5" />
<FuiCounterBadge :count="100" overflowCount="99" />
<FuiCounterBadge dot />

PresenceBadge

Presence badge

<FuiPresenceBadge status="available" />
<FuiPresenceBadge status="busy" />

Props

Badge

Prop	Type	Default	Description
size	tiny | extra-small | small | medium | large | extra-large	medium	Badge size
appearance	filled | tint | ghost	filled	Visual style
color	brand | danger | success | warning | severe | informational	brand	Color scheme
shape	circular | rounded | square	circular	Border shape

CounterBadge

Prop	Type	Default	Description
count	number	0	Display count
dot	boolean	false	Dot indicator
overflowCount	number	99	Max count before overflow
showZero	boolean	false	Show when count is 0
size	tiny | extra-small | small | medium | large | extra-large	medium	Badge size
color	brand | danger | success | warning | severe | informational	danger	Color scheme

PresenceBadge

Prop	Type	Default	Description
status	available | away | busy | do-not-disturb | offline | out-of-office	available	Presence status
size	tiny | extra-small | small | medium | large | extra-large	medium	Badge size
outOfOffice	boolean	false	Out of office variant