Component

Badge

Soft-tinted pill for status/counts, sharing the same 5 tones as Button.

Tones

DefaultForestWaterSunFire

Appearance

SoftSolidBordered

appearance accepts soft (default) | solid | bordered.

Shape

RoundedSquare

shape accepts rounded (default, full pill) | square (control-radius corners).

Removable

Removable filter chips

removeLabel names the dismiss control. Several removable badges side by side each need their own, or a screen reader hears a row of identical Remove buttons.

DesignersTokyoActive

removeLabel defaults to "Remove"

API reference

Prop	Type	Default	Description
appearance	BadgeAppearance	"soft"	Fill style. Default "soft".
onRemove	(() => void)	None	Shows a small dismiss control and calls back when it's clicked.
removeLabel	string	"Remove"	Accessible name for the dismiss control. Default "Remove".
shape	BadgeShape	"rounded"	Corner shape. Default "rounded".
tone	ComponentTone	"default"	Decorative color.

appearance"soft"

BadgeAppearance

Fill style. Default "soft".

onRemoveNone

(() => void)

Shows a small dismiss control and calls back when it's clicked.

removeLabel"Remove"

string

Accessible name for the dismiss control. Default "Remove".

shape"rounded"

BadgeShape

Corner shape. Default "rounded".

tone"default"

ComponentTone

Decorative color.

Also accepts everything from React.HTMLAttributes<HTMLSpanElement>.

Coding agents read this reference, with its examples, from the version your project has installed, through the Fuji UI MCP server. Set up your agent