# Badge

Displays a badge or a semantic element that looks like a badge.

Use Badge for status pills, small metadata labels, compact counts, and lightweight link-like callouts that should keep the badge silhouette.

## Import

```ts
import { BadgeComponent } from '@edsis/component/badge';
```

## Usage

Use `<Badge>` for the default host element or apply `[Badge]` to a semantic host such as `<span>` or `<a>` when the badge should inherit native behavior.

```html
<Badge>New</Badge>
<Badge variant="secondary">Secondary</Badge>
<Badge variant="destructive">Error</Badge>
<Badge variant="outline">Outline</Badge>
<Badge variant="ghost">Ghost</Badge>

<span Badge variant="secondary">v1.0</span>

<a Badge variant="link" href="#billing">
  Open billing
  <svg
    aria-hidden="true"
    viewBox="0 0 24 24"
    fill="none"
    stroke="currentColor"
    stroke-width="2"
    class="size-3"
  >
    <path d="M7 17L17 7" />
    <path d="M9 7h8v8" />
  </svg>
</a>
```

## Common patterns

### Variants

The Angular primitive follows the current shadcn badge palette and adds `ghost` plus `link` variants to cover low-emphasis and anchor-style treatments.

```html
<div class="flex flex-wrap gap-2">
  <Badge>Default</Badge>
  <Badge variant="secondary">Secondary</Badge>
  <Badge variant="destructive">Destructive</Badge>
  <Badge variant="outline">Outline</Badge>
  <Badge variant="ghost">Ghost</Badge>
</div>
```

### With icon

Project an inline SVG or icon component directly inside the badge. The primitive adds compact spacing and sizes direct child SVGs automatically.

```html
<Badge variant="secondary">
  <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
    <path d="M20 7L9 18l-5-5" />
  </svg>
  Verified
</Badge>
```

### With spinner

Spinner content can be projected like any other inline element.

```html
<Badge variant="destructive">
  <span
    aria-hidden="true"
    class="size-3 animate-spin rounded-full border-2 border-current border-r-transparent"
  ></span>
  Deleting
</Badge>
```

### Link host

shadcn React uses `asChild` for links. In Angular, use a semantic anchor host directly.

```html
<a Badge variant="link" href="#link">Open Link</a>
```

### Custom colors

Custom color treatments are plain classes on the host.

```html
<Badge class="border-transparent bg-sky-100 text-sky-800">Blue</Badge>
<Badge class="border-transparent bg-emerald-100 text-emerald-800">Green</Badge>
```

## API reference

### `BadgeComponent`

| Input     | Type                                                                          | Default     |
| --------- | ----------------------------------------------------------------------------- | ----------- |
| `variant` | `'default' \| 'secondary' \| 'destructive' \| 'outline' \| 'ghost' \| 'link'` | `'default'` |
| `class`   | `string`                                                                      | `''`        |

## Styling and theming

The base badge uses `border-border` for visible outlines instead of inheriting border color from text. Variant classes override that border when the badge should render as a filled pill.

Pass `class` to add custom backgrounds, foreground colors, spacing, or width behavior. Direct child SVGs inherit `currentColor` and receive compact sizing automatically.

Powered by `class-variance-authority`. Re-export: `badgeVariants` and `BadgeVariant`.

```ts
import { badgeVariants } from '@edsis/component/badge';

const className = badgeVariants({ variant: 'link' });
```

## Accessibility

- Keep meaningful text inside the badge when it communicates a state, label, or count.
- Do not rely on color alone to distinguish success, warning, or destructive meaning.
- When the badge should be interactive, use a semantic host like `<a Badge>` so native keyboard and screen-reader behavior stay intact.

## Keyboard interactions

Static badges are not focusable. Anchors and other semantic hosts keep their native keyboard behavior, so Tab and Enter handling stays with the host element rather than the badge primitive itself.

## Angular notes

- Angular uses the selector `Badge` for the default element host and `[Badge]` for semantic hosts.
- React `asChild` maps to choosing the correct host element directly in Angular templates.
- `variant` is an Angular `input()` on the badge component, so it works on both element and attribute hosts.

## Source parity

This Angular badge follows the shadcn Badge information architecture and examples while translating React-specific `asChild` composition into semantic Angular host elements.