## `<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`](#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) | `-` | 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`](#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: `-`

### Types

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

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

#### | "top-left"
		| "top-right"
		| "bottom-right"
		| "bottom-left"
		| undefined

`'top-left' | 'top-right' | 'bottom-right' | 'bottom-left' | undefined`

