Atelier UI

Search components…

Search components…

Badge

Status badge with seven variants, optional dot, removable chip and three sizes.

Edit in sandbox

Copy a prompt for your AI coding tool with the source, dependencies and usage

Props

BadgeProps

Also accepts all props of React.ComponentProps<"span">

PropTypeDefaultDescription
variantBadgeVariant"default"—
sizeBadgeSize"md"—
dotbooleanfalseLeading status dot
onRemove() => void—Shows an x button that calls this handler
removeLabelstring"Remove"—

Install

$ npx shadcn@latest add https://chromotion.dev/r/badge.json

More like this