DISPLAY

Badge

Badge adds a compact count or status to a child without changing the child’s measured size or interaction.

D
Live

PLAYGROUND

Add context without covering the control

Each example gets enough breathing room for the label to sit across the child’s corner on web, Android, and iOS.

A
3

COUNT

Keep numeric alerts short.

New

STATUS

Use soft for quiet metadata.

Beta

LABEL

Prefer one short word.

dowe
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" iconStart:"inbox"
    "Inbox"

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

POSITION

Choose one of four corners

The center of the capsule anchors to the selected corner, so the label remains legible without shifting the wrapped view.

TL

TOP LEFT

TR

TOP RIGHT

BL

BOTTOM LEFT

BR

BOTTOM RIGHT

USAGE

Keep the child primary

A Badge should clarify an existing view, not become a second control or a paragraph of content.

DO

Use semantic schemes

Choose danger for attention, success for completion, and info for contextual labels.

DO

Keep text compact

Use a count, symbol, or short status word that can remain on one line.

AVOID

Do not hide the target

Leave enough surrounding space for the capsule and keep essential content away from the chosen corner.

TARGET PARITY

One source, the same overlay

Dowe lowers the same Badge tree into target-owned layout primitives while preserving label metrics, scheme, variant, and corner.

WEB

Positioned overlay

The wrapper keeps the child’s intrinsic size and paints the capsule above its selected corner.

ANDROID

Compose Box overlay

Jetpack Compose measures the child first, then offsets the capsule by half of its own size.

IOS

SwiftUI aligned overlay

SwiftUI aligns the capsule center to the same corner without changing the content frame.

API

Props

Badge also accepts the applicable common spacing, sizing, visibility, and accessibility props on its wrapper.

Prop
Type
Default

No data

There are no records to display

Previous AvatarGroup

Next Collapsible