---

## Badge
Compact label for status, categories, counters, and notifications.

**Import:** `import { Badge } from '@urbicon-ui/blocks';`

### Examples
```svelte
<Badge variant="filled" intent="primary">New Feature</Badge>
```

```svelte
<div class="relative">
  <Button>Notifications</Button>
  <Badge intent="danger" counter placement="top-end" border>5</Badge>
</div>
```

### Variants
- intent: danger, neutral, primary, secondary, success, warning (default: primary)
- variant: dot, filled, outlined, soft (default: filled)
- size: lg, md, sm, xs (default: md)
- border: true (default: false)
- counter: true (default: false)
- disabled: true (default: false)
- interactive: true (default: false)
- placement: bottom, bottom-end, bottom-start, left, right, top, top-end, top-start
- pulse: true (default: false)
- removable: true (default: false)
- tier: commit, modify (default: commit)

### Api
| Prop | Type | Required | Default | Description |
| --- | --- | :---: | --- | --- |
| border | `boolean` | no |  | Add a ring outline in the page background color — useful to visually separate overlapping or positioned badges from their parent. |
| children | `Snippet` | no |  | Badge content (text, icons, numbers). |
| class | `string` | no |  | Extra classes merged onto the root element. |
| counter | `boolean` | no |  | Display as a compact pill for numeric counts. Tightens padding and uses tabular-nums so digits align. |
| disabled | `boolean` | no |  | Visually disable the badge (reduced opacity, no pointer events). |
| interactive | `boolean` | no |  | Enable hover/focus styles and keyboard activation. Automatically enabled when `onclick` is provided. |
| mint | `MintProp` | no |  | Micro-interaction preset. Only applies when the badge is interactive. |
| onclick | `(event: MouseEvent) => void` | no |  | Click handler. Automatically enables interactive styles. |
| onHover | `(hovered: boolean) => void` | no |  | Called when the hover state changes. |
| onRemove | `() => void` | no |  | Fired when the remove button is clicked (only when `removable` is true). |
| placement | `BadgePlacement` | no |  | Anchor the badge absolutely within a `position: relative` parent. |
| preset | `string` | no |  | Apply a named preset registered via `<BlocksProvider presets={{ Badge: {...} }}>`. Prefer this over `class` overrides when the requested look falls outside the semantic intent palette — presets keep hover/active/dark-mode logic coherent and make the custom look reusable across the project. |
| pulse | `boolean` | no |  | Add a pulsing animation to draw attention (e.g. for live indicators). |
| removable | `boolean` | no |  | Show a remove (×) button. |
| role | `'status' | 'alert' | 'badge'` | no |  | ARIA role. Defaults to `"status"`. Use `"alert"` for time-sensitive notifications. |
| slotClasses | `Partial<Record<BadgeSlots, string>>` | no |  | Per-slot class overrides merged with tv styles. |
| unstyled | `boolean` | no |  | Remove all default tv classes. |
| variant | `'dot' | 'filled' | 'outlined' | 'soft'` | no | 'filled' | Visual variant. `dot` renders a pure indicator (content hidden); the label variants accept the full surface. |
| intent | `'danger' | 'neutral' | 'primary' | 'secondary' | 'success' | 'warning'` | no | primary | Controls the color theme and semantic meaning of the Badge. Affects the overall appearance and user perception. Available options: danger, neutral, primary, and 3 more. |
| size | `'lg' | 'md' | 'sm' | 'xs'` | no | md | Controls the dimensions, padding, and text size of the Badge. Affects the component's physical footprint. Available options: lg, md, sm, xs. |
| tier | `'commit' | 'modify'` | no | commit | Controls the tier behavior and appearance of the Badge component. Available options: commit, modify. |