Badge

• Location: sabo/src/components/ui/badge.tsx

​

When to use

• Short labels for statuses, categories, counts, or “new”.
• Avoid full sentences; keep text concise.

​

Usage

import { Badge } from "@/components/ui/badge";

export function Example() {
  return (
    <>
      <Badge>Default</Badge>
      <Badge variant="secondary" className="ml-2">Secondary</Badge>
      <Badge variant="outline" className="ml-2">Outline</Badge>
      <Badge variant="destructive" className="ml-2">Error</Badge>
    </>
  );
}

​

Key props

​

Styling tip

• Badges are small—avoid wrapping. Use whitespace-nowrap for dynamic text.
• Use semantic colors for status (success/warning/error).

​

Accessibility

• Include a text label that conveys meaning (“Error”, “Beta”).