# Badge

> Small status indicator with color variants and optional pill shape. Reach for `<wr-tag>` (in the same entry) when you need a richer label — icons, loading state, outlined / transparent styles.

Source: https://ngwr.dev/reference/components/badge  
Kind: Component, Standalone

## Installation

```angular-ts
import { WrBadge, WrTag } from 'ngwr/badge';

@Component({ imports: [WrBadge, WrTag] })
export class MyComponent {}
```

## Basic usage

```html
<wr-badge>New</wr-badge>
```

## Colors

```html
<wr-badge color="primary">Primary</wr-badge>
<wr-badge color="success">Success</wr-badge>
```

## Sizes

```html
<wr-badge size="sm">12</wr-badge>
<wr-badge size="md">12</wr-badge>
<wr-badge size="lg">12</wr-badge>
```

## Shape

`rounded` (default) keeps the small form-radius, `pill` rounds the ends fully, and `squircle` takes the iOS-style smooth corner where `corner-shape` is supported.

```html
<wr-badge color="primary" shape="pill">Beta</wr-badge>
```

## Outlined

Transparent fill with a colored ring and text.

```html
<wr-badge color="primary" outlined>Beta</wr-badge>
```

## Tag — icons + loading

`<wr-tag>` is the richer sibling. Same entry (`ngwr/badge`), but supports icons, loading state, and outlined / transparent variants.

```angular-html
<wr-tag color="success" icon="checkmark">Done</wr-tag>
<wr-tag color="primary" outlined rounded>Beta</wr-tag>
<wr-tag color="warning" loading>Saving</wr-tag>
```

## API

Inputs of \<wr-badge>.

| Name | Description | Type | Default |
| --- | --- | --- | --- |
| `color` | Color variant. Maps to `--wr-color-*` CSS variables from the theme. | `WrColor` | `'primary'` |
| `size` | Size variant. | `WrBadgeSize` | `'md'` |
| `shape` | Corner treatment. Mirrors `<wr-btn>` — `rounded` (default) uses the small form-radius; `pill` rounds the ends fully. | `WrBadgeShape` | `'rounded'` |
| `outlined` | Outlined style — transparent fill, colored border and text. | `boolean` | `false` |

## Tag API

Inputs of \<wr-tag>, demoed above and shipped from the same entry point.

| Name | Description | Type | Default |
| --- | --- | --- | --- |
| `color` | Intent colour. | `WrColor` | `'primary'` |
| `icon` | Icon rendered beside the label. | `WrIconName \| null` | `null` |
| `iconPosition` | Which side the icon sits on. | `'start' \| 'end'` | `'start'` |
| `outlined` | Transparent fill with a coloured ring. | `boolean` | `false` |
| `transparent` | Drop the fill entirely. | `boolean` | `false` |
| `rounded` | Pill radius instead of the default. | `boolean` | `false` |
| `hoverable` | Add a hover affordance. | `boolean` | `false` |
| `loading` | Swap the icon for a spinner. | `boolean` | `false` |

## CSS variables

Custom properties `ngwr/badge` publishes. Each default below is declared on the component's own selector, so a `:root` override is shadowed by it — set them on that selector, on a wrapper you scope yourself, or inline on the element. Unlike the BEM class names, these are the supported way to restyle the component.

| Variable | Default | Declared on |
| --- | --- | --- |
| `--wr-badge-font-size` | `var(--wr-text-xs)` | `.wr-badge` +2 variant overrides |
| `--wr-badge-font-weight` | `600` | `.wr-badge` |
| `--wr-badge-min-height` | `1.5rem` | `.wr-badge` +2 variant overrides |
| `--wr-badge-padding-x` | `0.5rem` | `.wr-badge` +3 variant overrides |
| `--wr-badge-padding-y` | `0.25rem` | `.wr-badge` +2 variant overrides |
| `--wr-badge-radius` | `var(--wr-border-radius-sm)` | `.wr-badge` +1 variant override |
| `--wr-tag-bg` | `var(--wr-color-surface)` | `.wr-tag` +3 variant overrides |
| `--wr-tag-border` | `var(--wr-color-outline)` | `.wr-tag` +4 variant overrides |
| `--wr-tag-color` | `var(--wr-color-on-surface)` | `.wr-tag` +3 variant overrides |
| `--wr-tag-font-size` | `var(--wr-text-xs)` | `.wr-tag` |
| `--wr-tag-font-weight` | `500` | `.wr-tag` |
| `--wr-tag-line-height` | `normal` | `.wr-tag` |
| `--wr-tag-min-height` | `1.375rem` | `.wr-tag` |
| `--wr-tag-padding-x` | `0.5rem` | `.wr-tag` +1 variant override |
| `--wr-tag-padding-y` | `0.125rem` | `.wr-tag` |
| `--wr-tag-radius` | `var(--wr-border-radius-sm)` | `.wr-tag` +1 variant override |