Badge

A compact status label with color, size, and icon variations.

Colors

default is an outline on a transparent background, so it takes the color of the surface under it. Use it on primary surfaces such as cards, tables, and pages.

default
red
blue
green
amber
yellow
purple
orange
gray
cyan

Sizes

micro
small
default
large

Icon and tooltip

iconStart takes an icon name. tooltip wraps the badge in a tooltip.

Ready
Needs review
Failed
Tracked

Agent Builder variant

Borderless squared badges used on the Agent Builder canvas, such as the Beta and Internal labels on node headers. This variant has no yellow style, so type="yellow" renders an unstyled label; use amber instead.

default
red
blue
green
amber
purple
orange
gray
cyan

Properties

titleRequired
ReactNode

Badge label.

type
'default''red''blue''green''amber''yellow''purple''orange''gray''cyan'

Color treatment.

Default: default

size
'micro''small''default''large'

Padding and type scale.

Default: default

variant
'default''agent-builder'

Rounded bordered badge or the borderless Agent Builder badge.

Default: default

fontWeight
'medium''regular'

Label weight.

Default: medium

iconStart
IconValue

Icon shown before the label, tinted to match the type.

tooltip
string

Tooltip content shown on hover.

className
string

Additional classes for the badge.

titleClassName
string

Additional classes for the label.