Badge

A small visual element for displaying status, labels, categories, or counts.

Usage


import { Badge } from "@rhinolabs/ui"
 
export default function BadgeDemo() {
  return (
    <Badge>
      New
    </Badge>
  )
}

Examples

Variants

Different badge variants for various contexts.


<div className="flex flex-wrap gap-2">
  <Badge variant="default">Default</Badge>
  <Badge variant="secondary">Secondary</Badge>
  <Badge variant="destructive">Destructive</Badge>
  <Badge variant="outline">Outline</Badge>
</div>

With Icons

Badges can include icons for enhanced visual context.


<div className="flex flex-wrap gap-2">
  <Badge>
    <svg
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth="2"
      strokeLinecap="round"
      strokeLinejoin="round"
      className="mr-1 h-3 w-3"
    >
      <circle cx="12" cy="12" r="10" />
      <path d="m9 12 2 2 4-4" />
    </svg>
    Completed
  </Badge>
  
  <Badge variant="destructive">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth="2"
      strokeLinecap="round"
      strokeLinejoin="round"
      className="mr-1 h-3 w-3"
    >
      <path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z" />
      <path d="M12 9v4" />
      <path d="M12 17h.01" />
    </svg>
    Warning
  </Badge>
</div>

Props

Prop	Type	Default	Description
`variant`	`"default" \| "secondary" \| "destructive" \| "outline"`	`"default"`	The visual style of the badge

The Badge component also accepts all standard HTML div attributes.

Design Considerations

Use appropriate variants to match content importance
Keep badge text concise and clear
Maintain consistent spacing when using with icons
Consider color contrast for accessibility
Use badges sparingly to avoid visual clutter

Accessibility

Ensures sufficient color contrast
Provides focus indicators
Maintains readable text size
Uses semantic HTML structure