Dowe

DISPLAY

Badge

Badge wraps any view child and positions a compact count, status, or label without taking over the child’s layout.

Live

PLAYGROUND

Layer status onto real controls

Use position for spatial meaning and keep the badge text short enough to scan at a glance.

New

Beta

Badge text:"3" scheme:"danger" position:"top-right"
  Avatar name:"Ada" size:"xl" scheme:"secondary" bordered:true

Badge text:"New" scheme:"success" variant:"soft" position:"bottom-right"
  Button variant:"soft" scheme:"primary" size:"md" iconStart:"inbox"
    "Inbox"

Badge text:"Beta" scheme:"info" variant:"soft" position:"top-left"
  Button variant:"solid" scheme:"muted" size:"lg"
    "Command"

ADVANCED PATTERNS

Counts, labels, and corners

A badge should add a small piece of context while the child remains the primary interaction or information surface.

COUNT

STATUS

Live

LABEL

Beta

ALERT

POSITION

Anchor to the child

The four position values attach the label to a corner of the wrapped child; they do not alter document flow.

SCHEME

Make status semantic

Use danger for attention, success for completion, info for context, and muted for quiet metadata.

API

Props

Badge also accepts the applicable common spacing, sizing, border, visibility, and accessibility props.

Prop	Type	Default
No data There are no records to display

Previous AvatarGroup

Next Collapsible

No data