Badges
Badges, labels, tags, and announcement banners with multiple colors, variants, and configurations.
Standard Badge
Shadcn Variants
Standard variants from the base component library.
Default
Secondary
Destructive
Outline
Extended Variants
badge-extended.tsx
Filled
Solid background colors.
Primary
Green
Yellow
Red
Blue
Purple
Gray
Outline
Border with transparent background.
Primary
Green
Yellow
Red
Blue
Purple
Gray
Soft
Subtle background with darker text.
Primary
Green
Yellow
Red
Blue
Purple
Gray
Ghost
No background until hover (optional).
Primary
Green
Yellow
Red
Blue
Purple
Gray
Surface
Background with matching subtle border.
Primary
Green
Yellow
Red
Blue
Purple
Gray
Features & Configuration
Dot Indicator
Status dots for quick visual cues.
Primary
Green
Yellow
Red
Icons
Left or right aligned icons.
Verified
Warning
Next Step
Radius
Control the border radius.
Square
Rounded SM
Rounded MD
Rounded LG
Pill
Removable
Tags with a remove button.
React
TypeScript
Tailwind
Announcement Badges
Horizontal banners with badge, text, and optional arrow.
Announcement Variants
Different styles for announcements.
NEWAnnouncement text goes here
UPDATENew features have been released
INFOHelpful tips and tricks
Sizes & Radius
Customizing appearance.
SMSmall / Square
MDMedium / Default
LGLarge / Pill