Vuance UI Kit

Status and count

Badge

A small error-role indicator for numeric counts, short labels, capped values, and status dots.

Playground

Configure the component and copy synchronized Vue code.

Interactive preview

Changes are reflected in the example and source.

12

Properties

Value

Short text or numeric count

Maximum

Numbers above it receive +

Presentation

Dot suppresses visible content

Vue

<m-badge :value="12" />

Token map

The manual manifest combines inherited token owners with local deltas.

MBadge · All8 tokens
m3-badge

MBadge API

Props, slots, and events are generated from the current public kit contract.

MBadge

Feedback family
src/runtime/components/ui/badge

Props

NameTypeDefault
valueText or numeric value displayed by the badge.
string | numberundefined
maxLargest numeric value shown before the badge appends a plus sign.
number99
dotRenders a compact status dot without visible label content.
booleanfalse

Slots

Events

MBadge does not emit component-specific events. Native events fall through to its root element.