Badge

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

PublishedTrialCurrentInternal
Fig. 1 Badges labeling status and category.

When to use it

Use Badge to label the state of something nearby: Published, Draft, Beta. Keep it to a word or two.

Save color for status that matters. Most badges can stay neutral.

Alert

Stays on the page.

Changes saved
Your project is up to date and ready to share.

Warnings and errors about this page.

Toast

Comes and goes.

Confirmations that need no reply.

BadgeThis page

Labels a status.

PublishedTrialCurrentInternal

Published, Draft, and Beta.

Empty

Nothing here yet.

No documents yet
Write specs, meeting notes, and decisions in one place. Documents you create or that teammates share with you will show up here.

Tip: press⌘Nfrom anywhere to start a document.

First runs and empty searches.

Fig. 2 Four ways to tell people something. Pick by how long it should stay and how much it matters.

How it behaves

Renders a span by default. Preserves shadcn render composition and default, secondary, destructive, outline, ghost, and link variants; JZB adds success and accent.

The default is a quiet bordered label with tight corners. Success and accent use light tints and subtle borders; secondary remains a filled alternative. Shared label-sm typography keeps badges compact.

Use words as well as color to communicate status. Native span props are forwarded.

Build it

Add it with the shadcn CLI:

Terminal

A complete example. Change the values to fit your product:

badge-example.tsx

The full source is yours to edit once installed:

badge.tsx