# swc-badge

A badge component that displays short, descriptive information about an element. Badges are typically used to indicate status, categories, or provide supplementary information.

```js
import '@adobe/spectrum-wc/components/badge/index.js';
// <swc-badge></swc-badge>
```

## Attributes

| Name      | Type                       | Default     | Description                                                             |
| --------- | -------------------------- | ----------- | ----------------------------------------------------------------------- |
| `variant` | `BadgeVariant`             | `'neutral'` | The semantic or non-semantic color variant of the badge.                |
| `size`    | `ElementSize`              | -           | The size of the badge.                                                  |
| `fixed`   | `FixedValues \| undefined` | -           | The fixed position of the badge.                                        |
| `subtle`  | `boolean`                  | `false`     | Whether the badge is subtle.                                            |
| `outline` | `boolean`                  | `false`     | Whether the badge is outlined. Can only be used with semantic variants. |

## Slots

| Name        | Description                                         |
| ----------- | --------------------------------------------------- |
| `(default)` | Text label of the badge.                            |
| `icon`      | Optional icon that appears to the left of the label |

## CSS Custom Properties

| Name                                        | Description                                                                     |
| ------------------------------------------- | ------------------------------------------------------------------------------- |
| `--swc-badge-height`                        | Minimum block size of the badge.                                                |
| `--swc-badge-corner-radius`                 | Corner radius of the badge.                                                     |
| `--swc-badge-gap`                           | Gap between the icon and label.                                                 |
| `--swc-badge-padding-block`                 | Block padding.                                                                  |
| `--swc-badge-padding-inline`                | Inline padding.                                                                 |
| `--swc-badge-padding-inline-start`          | Inline-start padding; overrides the start side of `--swc-badge-padding-inline`. |
| `--swc-badge-font-size`                     | Font size of the label.                                                         |
| `--swc-badge-line-height`                   | Line height of the label.                                                       |
| `--swc-badge-icon-size`                     | Size of the icon in the icon slot.                                              |
| `--swc-badge-label-icon-color`              | Color of the label text and icon.                                               |
| `--swc-badge-background-color`              | Background color of the badge.                                                  |
| `--swc-badge-border-color`                  | Border color; visible on the outline variant.                                   |
| `--swc-badge-with-icon-padding-inline`      | Inline padding when the badge has both an icon and a label.                     |
| `--swc-badge-with-icon-only-padding-inline` | Inline padding for icon-only badges.                                            |
| `--swc-badge-with-icon-only-padding-block`  | Block padding for icon-only badges.                                             |
| `--swc-badge-outline-background-color`      | Background color override for the outline variant.                              |
| `--swc-badge-outline-label-icon-color`      | Label and icon color override for the outline variant.                          |