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