Badge

A small label for status, category, or count indicators.

Badge

Installation

pnpm dlx stera-ui@latest add badge

Examples

Variant

Use the variant prop to change the style of the badge.

Badge

Badge Variants

Variant	Description
`default`	Subtle neutral background
`outline`	Bordered, no background
`solid`	Strong neutral inverse background

Colors

Appy semantic and brand colors to a badge

DefaultBrandAccentDangerSuccessWarning

Badge Colors

Variant	Description
`default`	Subtle neutral background
`brand`	Primary brand color
`accent`	Accent brand color
`danger`	Red
`success`	Green
`warning`	Yellow

With Icon

You can render an icon inside the badge. Use data-icon="inline-start" to render the icon on the left and data-icon="inline-end" to render the icon on the right.

OfflineCopied

With Icon

With Spinner

You can render a spinner inside the badge. Remember to add the data-icon="inline-start" or data-icon="inline-end" prop to the spinner.

ProcessingThinking

With Spinner

Sizes

Use size prop to select between sm (default), md, and lg.

SmallDefaultLarge

Badge Sizes

Size	Description
`sm`	16px height (default)
`md`	20px height
`lg`	24px height

API Reference

Prop	Type	Default
`variant`	`"default"` `"outline"` `"solid"` `"brand"` `"brand-outline"` `"brand-solid"` `"accent"` `"accent-outline"` `"accent-solid"` `"danger"` `"danger-outline"` `"danger-solid"` `"success"` `"success-outline"` `"success-solid"` `"warning"` `"warning-outline"` `"warning-solid"`	`"default"`
`size`	`"sm" \| "md" \| "lg"`	`"md"`
`render`	`React.ReactElement`	—

Accepts all standard <span> props. Supports render prop for polymorphic rendering via Base UI's useRender.