Badge
Displays a small label for status indicators, notification counts, or content categorization to help users quickly scan and identify information.
Default
The default
Badge renders with the Default variant, using the primary color scheme with a solid background. This is the most visually prominent variant, ideal for drawing attention to new or important items.Variants
Use the
Variant parameter to change the visual style. Choose from Default (solid primary), Secondary (muted background), Destructive (red for errors or warnings), and Outline (bordered with transparent background). Status variants include Success, Warning, and Info. Use Soft, SoftDestructive, SoftSuccess, SoftWarning, or SoftInfo for softer backgrounds.With Icons
Include icon components inside
ChildContent alongside text for added visual context. Use the class attribute with gap-1 to space the icon from the label text. Icons help users quickly identify the badge meaning without reading the label.Status
Override default colors with the
Class parameter to create semantic status indicators. Combine custom background, hover, and text color utilities for project-specific status patterns like "Active", "Warning", and "Info" that go beyond the built-in variants.In Context
Badges are compact, inline-friendly elements that pair naturally with headings, labels, and other text. Use the
Secondary or Outline variant for less prominent labels like version numbers, while the Default variant works well for notification counts that need to stand out.Custom Variant
Use the
Class parameter to create fully custom badge styles with gradients, custom colors, or themed appearances that go beyond the built-in variants. Set border-0 to remove the default border for gradient designs.Dot Indicator
Use the
ShowDot parameter to display a small notification dot on the badge. Control its position with DotPosition and customize its color with DotClass. This is useful for showing online/active status or drawing attention to a badge without adding extra text.Notification Badge
A real-world composition pattern: position a badge absolutely over an icon button to create a notification indicator. Use
ring-2 ring-background to create a clear visual separation between the badge and the underlying element.Badge Icon
BbBadgeIcon accepts a Lucide Name or custom ChildContent. It is decorative and hidden from assistive technology, so keep meaningful text alongside it.