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