# Badge (/feedback/badge)





<ComponentPreview name="badge-preskok-demo" description="Badge intents rendered from the component's variants." />

## Installation [#installation]

```bash
npx shadcn@latest add @preskok/badge
```

## Usage [#usage]

```tsx
import { Badge } from "@/components/ui/preskok-ui/badge"

export function BadgeDemo() {
  return (
    <div className="flex flex-wrap gap-2">
      <Badge>Primary</Badge>
      <Badge intent="secondary">Secondary</Badge>
      <Badge intent="success">Success</Badge>
      <Badge intent="warning">Warning</Badge>
      <Badge intent="danger">Danger</Badge>
      <Badge intent="outline">Outline</Badge>
    </div>
  )
}
```

## Props [#props]

| Prop        | Type                                                                                    | Default     | Description               |
| ----------- | --------------------------------------------------------------------------------------- | ----------- | ------------------------- |
| `intent`    | `"primary" \| "secondary" \| "success" \| "info" \| "warning" \| "danger" \| "outline"` | `"primary"` | Visual style variant      |
| `isCircle`  | `boolean`                                                                               | `true`      | Rounded vs. squared badge |
| `className` | `string`                                                                                | -           | Additional CSS classes    |