---
url: /docs/components/badge/frameworks/elements.md
---
# Badge - Elements

Badges are used to highlight a relevant piece of information, like status or category.

## 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>
```

## 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.

## Examples

### Basic

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

### Status Variants

```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>
```

### Price

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

### Sponsored

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

### Positioned

```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>
```

### Positioned Sponsored Badge

```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>
```

## 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
```

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