# Badge (w-badge)

## Description

`w-badge` is used for showing a small amount of non-interactive color-categorized metadata, like a status or count.

## Usage

Badge is a compact, non-interactive label for short metadata such as status, category, count, price, or sponsorship information.

Use a badge when the label supports nearby content and does not require user interaction.

### Basic Badge

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

### Variants

Choose a variant that matches the meaning of the badge text:

- `neutral`: default metadata or low-emphasis labels
- `info`: informational labels
- `positive`: successful, active, or approved states
- `warning`: cautionary states
- `negative`: error, blocked, or rejected states
- `disabled`: unavailable or inactive states
- `price`: price labels, especially when placed over media
- `sponsored`: sponsored or commercial labels

```html
<w-badge variant="neutral">Neutral</w-badge>
<w-badge variant="info">Info</w-badge>
<w-badge variant="positive">Approved</w-badge>
<w-badge variant="warning">Pending</w-badge>
<w-badge variant="negative">Rejected</w-badge>
<w-badge variant="disabled">Unavailable</w-badge>
<w-badge variant="price">1 200 kr</w-badge>
<w-badge variant="sponsored">Sponsored</w-badge>
```

If `variant` is omitted, the badge uses the neutral visual treatment.

### Positioned Badges

Use `position` when a badge should sit in a corner of a parent element, such as a media thumbnail or listing image. The parent element should establish the positioning context with `position: relative`.

Supported positions are `top-left`, `top-right`, `bottom-right`, and `bottom-left`.

```html
<div style="position: relative;">
  <img src="listing.jpg" alt="Living room with large windows" />
  <w-badge variant="price" position="top-right">1 200 kr</w-badge>
</div>
```

### Content Guidelines

Keep badge text short and descriptive. Avoid using badges for full messages, instructions, or actions. Use [Alert](/docs/components/alert/overview) for important feedback messages and an interactive component, such as a button or link, when the user can act on the item.

## Accessibility

Badge renders slotted text as regular content. It does not add an ARIA role and it is not announced as a live region.

### Use Meaningful Text

Do not rely on color alone to communicate meaning. The badge text should describe the status or metadata by itself.

```html
<w-badge variant="positive">Approved</w-badge>
<w-badge variant="negative">Rejected</w-badge>
```

Avoid labels that only make sense visually:

```html
<!-- Avoid -->
<w-badge variant="positive">Green</w-badge>
```

### Keep Badges Non-Interactive

Do not place interactive elements inside `w-badge`. If the user can click, dismiss, filter, or select the item, use an interactive component instead.

The `disabled` variant is visual only. It does not disable related controls or remove anything from the tab order.

```html
<!-- Avoid -->
<w-badge>
  <button type="button">New</button>
</w-badge>
```

### Dynamic Changes

If a badge value changes after the page has loaded and users need to be notified, announce that change outside the badge with an appropriate live region or use [Alert](/docs/components/alert/overview) for important feedback.

### Duplicate or Decorative Badges

If the same information is already available in nearby accessible text and the badge is only a visual duplicate, hide the duplicate badge from assistive technologies.

```html
<p>Sponsored listing</p>
<w-badge aria-hidden="true" variant="sponsored">Sponsored</w-badge>
```

## Examples

### Basic

<elements-example>
  
```html
<w-badge>New</w-badge>
```

</elements-example>

### Status Variants

<elements-example>

```html
<w-badge variant="neutral">Neutral</w-badge>
<w-badge variant="info">Info</w-badge>
<w-badge variant="positive">Approved</w-badge>
<w-badge variant="warning">Pending</w-badge>
<w-badge variant="negative">Rejected</w-badge>
<w-badge variant="disabled">Unavailable</w-badge>
```

</elements-example>

### Price

<elements-example>
  
```html
<w-badge variant="price">1 200 kr</w-badge>
```

</elements-example>

### Sponsored

<elements-example>
  
```html
<w-badge variant="sponsored">Sponsored</w-badge>
```

</elements-example>

### Positioned

<elements-example>

```html
<div style="position: relative; width: 220px; height: 124px; border-radius: 8px; overflow: hidden; background: #e5e7eb;">
  <w-badge variant="price" position="top-right">1 200 kr</w-badge>
</div>
```

</elements-example>

### Positioned Sponsored Badge

<elements-example>

```html
<div style="position: relative; width: 220px; height: 124px; border-radius: 8px; overflow: hidden; background: #e5e7eb;">
  <w-badge variant="sponsored" position="bottom-left">Sponsored</w-badge>
</div>
```

</elements-example>

## Styling API

Badge supports styling through **component tokens** (CSS custom properties with a `--w-c-` prefix) and **parts**.

### Parts

Use `::part(part-name)` from outside the component.

- `base` - the root element of the badge

```css
w-badge::part(base) {
	text-transform: uppercase;
	border: 1px solid currentColor;
}
```

### Component tokens

Set these on `<w-badge>` to override visuals.

```css
w-badge {
	--w-c-badge-bg: rebeccapurple;
	--w-c-badge-color: white;
	--w-c-badge-border-radius: 9999px;
}
```

##### Layout and typography

- `--w-c-badge-border-radius`
- `--w-c-badge-font-size`
- `--w-c-badge-line-height`
- `--w-c-badge-padding-x`
- `--w-c-badge-padding-y`

##### Background and text

- `--w-c-badge-bg`
- `--w-c-badge-color`

##### Border

- `--w-c-badge-border-width`
- `--w-c-badge-border-color`

##### Positioned badges

- `--w-c-badge-backdrop-filter`

## `<w-badge>` API

Unless otherwise noted all properties are HTML attributes (as opposed to JavaScript object properties).

### Properties

| Name | Type | Default | Summary |
|-|-|-|-|
| position | `"top-left" \| "top-right" \| "bottom-right" \| "bottom-left" \| undefined` | `-` | Positions the badge in a corner of a parent element. |
| variant | [`\| "neutral"
		\| "info"
		\| "positive"
		\| "warning"
		\| "negative"
		\| "disabled"
		\| "price"
		\| "sponsored"
		\| undefined`](#neutral-info-positive-warning-negative-disabled-price-sponsored-undefined) | `"neutral"` | Controls the badge color treatment. |

### Property Details

#### position

Positions the badge in a corner of a parent element.
Use this with a parent element that has `position: relative`. When set, the badge uses absolute positioning and adjusts its corner radii so it sits flush against the selected corner.
Use this with a parent element that has `position: relative`. Accepted values are `top-left`, `top-right`, `bottom-right`, and `bottom-left`.

- Type: `"top-left" | "top-right" | "bottom-right" | "bottom-left" | undefined`
- Default: `-`

#### variant

Controls the badge color treatment.
If omitted, the badge uses neutral styling without reflecting a `variant` attribute.
Accepted values are `neutral`, `info`, `positive`, `warning`, `negative`, `disabled`, `price`, and `sponsored`. If omitted, the badge uses neutral styling without reflecting a `variant` attribute.

- Type: [`| "neutral"
		| "info"
		| "positive"
		| "warning"
		| "negative"
		| "disabled"
		| "price"
		| "sponsored"
		| undefined`](#neutral-info-positive-warning-negative-disabled-price-sponsored-undefined)
- Default: `"neutral"`

### Types

#### | "neutral"
		| "info"
		| "positive"
		| "warning"
		| "negative"
		| "disabled"
		| "price"
		| "sponsored"
		| undefined

`'neutral' | 'info' | 'positive' | 'warning' | 'negative' | 'disabled' | 'price' | 'sponsored' | undefined`