Badge

A small inline label component with multiple semantic variants (default, secondary, destructive, success, warning, outline, ghost, link) built on Base UI's useRender for polymorphic rendering.

Default
DefaultSecondaryOutlineSuccessWarningDestructiveGhostLink
As Link

Render as an anchor using the render prop.

DocumentationChangelogGitHubView source

This feature is available in v2.4 and later. Check the migration guide for details.

Inline Content

Tags

typescriptreactperformanceaccessibilitytesting

Inline usage

Components48

Plan: Pro — 3 of 5 seats used

Counts

Inbox3Updates12Archived0
Invalid

Validation state

Required field missingInvalid formatOut of range

Normal vs invalid

UsernameUsername
Status

Recent deployments

Deployment #847Live
Deployment #846Building
Deployment #845Failed
Deployment #844Cancelled
Deployment #843Queued
With Icon
VerifiedPendingFailedInfo
FeaturedScheduled

Installation

npx shadcn@latest add @byronwade/badge

Props

PropTypeDefaultDescription
variant"default" | "secondary" | "destructive" | "success" | "warning" | "outline" | "ghost" | "link""default"Visual style variant controlling color and appearance of the badge.
renderuseRender.RenderProp<"span">—Base UI render prop for polymorphic rendering — override the default span element.
classNamestring—Additional CSS class names merged with the variant styles.