# swc-status-light

A status light conveys the condition of an entity as a colored dot with a descriptive label.

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

## Attributes

| Name      | Type          | Default     | Description                                                |
| --------- | ------------- | ----------- | ---------------------------------------------------------- |
| `variant` | `string`      | `'neutral'` | Semantic or non-semantic color variant for the status dot. |
| `size`    | `ElementSize` | -           | The size of the status light.                              |

## Slots

| Name        | Description                         |
| ----------- | ----------------------------------- |
| `(default)` | The text label of the status light. |

## CSS Custom Properties

| Name                                | Description                        |
| ----------------------------------- | ---------------------------------- |
| `--swc-status-light-dot-size`       | Size of the indicator dot.         |
| `--swc-status-light-dot-color`      | Color of the indicator dot.        |
| `--swc-status-light-font-size`      | Font size of the label.            |
| `--swc-status-light-line-height`    | Line height of the label.          |
| `--swc-status-light-text-to-visual` | Gap between the dot and the label. |
| `--swc-status-light-content-color`  | Color of the label text.           |