Skip to main content
Badge component preview (light)
  • 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

sabo/src/components/ui/badge.tsx
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

​
variant
string
default | secondary | outline | destructive
​
asChild
boolean
Render as child (e.g., anchor) while keeping Badge styles.

​
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”).