Search

Search components and blocks

Sign in

Badge

A status pill that pops in with a spring instead of appearing instantly, with an optional dismiss button for removable tags — plan tiers, feature flags, filter chips. The tag variant pairs a solid pill (an avatar and a name) with a tinted message, for notices such as a name next to a trial reminder. The solid pill slides in first, then the message fades in behind it.

pnpm dlx shadcn@latest add @ditherui/badge
DefaultSecondaryPast dueBetaDraft
MMayaYour free trial ends in 3 days
ReactTailwindMotion

Install

$ pnpm dlx shadcn@latest add @ditherui/badge

Props

variant"default" | "secondary" | "destructive" | "outline" | "ghost" | "link" | "tag""default"
tagReactNode— (variant "tag": the solid left pill, e.g. avatar + name)
onDismiss() => void—
classNamestring—

When to use the badge

Use badges for status pills such as plan tiers, feature flags and filter chips. A badge pops in with a spring instead of appearing instantly.

  • Open the CLI tab on any preview above for the exact shadcn command. The source is copied into your project, so you can edit it like any other file.

Suggested components