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