Badge

An inline component that visually displays status, labels, categories, and similar. Use it next to text to convey supplementary information or to indicate the state of list items.

Preview

Design

PrimarySuccessWarningDanger

Examples

Variant

Controls the visual emphasis level of the badge.

Value	Default	Description
`solid`	✓	Filled background. Use for states that need the most emphasis.
`outline`		Border only. Use for states with medium emphasis.
`subtle`		Light background. Use for supplementary information with low emphasis.
`weak`		Lightest background. Use for tags with low contrast against the background.

Design

SolidOutlineSubtleWeak

Intent

Controls the semantic color of the badge.

Value	Default	Description
`primary`	✓	Primary categories and core information.
`secondary`		Secondary categories and supplementary information.
`success`		Completion, normal, or active state.
`warning`		Caution or incomplete state.
`danger`		Error, inactive, or danger state.
`neutral`		Neutral state.

Design

PrimarySecondarySuccessWarningDangerNeutral

Size

Controls the badge size. Choose based on the size of adjacent text or components.

Value	Default	Description
`small`		For secondary labels next to body text.
`medium`	✓	Most versatile size.
`large`		For use with larger components.
`xlarge`		When heading-level size is needed.

Design

SmallMediumLargeXLarge

Rounded

Controls the corner radius of the badge. Each step stays visibly distinct at every size.

In the game theme, rounded steps the corners of the pixel frame instead of curving them: small is square, medium cuts a one-step notch, and large cuts a two-step corner.

Value	Default	Description
`small`		Small corner radius
`medium`	✓	Default corner radius
`large`		Fully rounded (pill)

Show dot

Shows a status dot before the badge. Use when indicating real-time state changes or notifications.

Type: boolean
Default: false

Design

ActiveErrorPending

Guidelines

Choosing variant

solid: Use when information needs clear emphasis. Suitable for list status indicators, count badges near CTAs, and similar.
outline / subtle / weak: Use for lightweight tags or category labels next to text. Avoid over-emphasizing on the screen.

Using the dot

Use showDot to indicate real-time status. Recommended patterns: success ↔ online/normal, danger ↔ error/offline, warning ↔ caution.

Props

Prop

Default

Type

size?

"medium"

"small" | "medium" | "large" | "xlarge"

variant?

"solid"

"solid" | "outline" | "subtle" | "weak"

intent?

"primary"

rounded?

"medium"

"small" | "medium" | "large"

showDot?

false

boolean

children

—

ReactNode