> ## Documentation Index
> Fetch the complete documentation index at: https://docs.getsabo.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Badge

> Small count and labeling component for statuses and tags.

<Frame>
  <img src="https://mintcdn.com/aristotechnologiesinc/AI-6KNJJN4jkkZTo/images/ui/badge-light.png?fit=max&auto=format&n=AI-6KNJJN4jkkZTo&q=85&s=e5b2bcc76a8910cc3a8d1f09df00c589" alt="Badge component preview (light)" width="440" data-path="images/ui/badge-light.png" />
</Frame>

* **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

```tsx sabo/src/components/ui/badge.tsx theme={null}
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

<ParamField path="variant" type="string">
  <code>default</code> | <code>secondary</code> | <code>outline</code> | <code>destructive</code>
</ParamField>

<ParamField path="asChild" type="boolean">
  Render as child (e.g., anchor) while keeping Badge styles.
</ParamField>

## Styling tip

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

## Accessibility

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