Badge

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.

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). Each variant conveys a different level of visual importance.

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.

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.

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.

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.

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.

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.