Badge

Status label for categories, counts, and metadata, with an optional dot indicator and dismiss action.

GrayBrandSuccessWarningError

Installation

npx asteria-ui add badge

Usage

import { Badge } from "@/components/ui/badge";

<Badge variant="success">Active</Badge>
<Badge dismissible onDismiss={() => remove(tag)}>Frontend</Badge>

Examples

Fill styles

SubtleOutlineSolid

Sizes

SmallMedium

With a status dot

Active

Dismissible

Removable

API reference

Prop	Type	Default	Description
variant	"gray" \| "brand" \| "success" \| "warning" \| "error"	"gray"	Color treatment.
fill	"subtle" \| "outline" \| "solid"	"subtle"	Fill style — tinted background, bordered/transparent, or solid on-color.
size	"sm" \| "md"	"sm"	Padding and font size.
iconOnly	boolean	false	Renders as a compact square icon-only badge instead of a text label.
showDot	boolean	false	Shows a small decorative status dot before the label.
dismissible	boolean	false	Shows a dismiss button with aria-label="Remove" after the label.
onDismiss	() => void	—	Called when the dismiss button is activated.

Alert — for prominent status messages
Toast — for notifications
Tag Input — for user-created tags

Accessibility

Root element. Renders as a native <output>, whose implicit ARIA role genuinely is status — no explicit role attribute needed.
Dismiss button. role="button" with aria-label="Remove", and its own glow-focus ring.
Dot indicator. Purely decorative — aria-hidden.

On this page