Badge

Small count and labeling component for statuses and tags.

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