<!-- Generated by scripts/generate-web-components.js. Do not edit directly. -->

# StatusBadge

Displays a compact workflow status with a semantic icon or dot.

```html
<noora-status-badge status="success" label="Complete"></noora-status-badge>
```

## Attributes

| Attribute | Type or allowed values | Default | Description |
| --- | --- | --- | --- |
| `type` | `icon`, `dot` | `"icon"` | Chooses a semantic icon or a dot indicator. |
| `status` | `success`, `error`, `warning`, `attention`, `disabled`, `in_progress` | `"success"` | Sets the semantic status. |
| `label` | `string` | `""` | Sets the visible label. |

## Slots

| Slot | Description |
| --- | --- |
| `default` | Custom label content that takes precedence over the label attribute. |

## Styling parts

| Part | Description |
| --- | --- |
| `badge` | The status badge container. |
| `icon` | The semantic icon or dot. |
| `label` | The visible label. |


## Statuses

Communicate workflow state with a semantic icon.

```html
<noora-status-badge status="success" label="Complete"></noora-status-badge>
<noora-status-badge status="error" label="Failed"></noora-status-badge>
<noora-status-badge status="warning" label="Warning"></noora-status-badge>
<noora-status-badge status="attention" label="Needs attention"></noora-status-badge>
<noora-status-badge status="in_progress" label="Running"></noora-status-badge>
```

## Dot indicators

Use dots when the icon shape is unnecessary.

```html
<noora-status-badge type="dot" status="success" label="Complete"></noora-status-badge>
<noora-status-badge type="dot" status="error" label="Failed"></noora-status-badge>
<noora-status-badge type="dot" status="warning" label="Pending"></noora-status-badge>
<noora-status-badge type="dot" status="attention" label="Needs attention"></noora-status-badge>
<noora-status-badge type="dot" status="in_progress" label="Running"></noora-status-badge>
```