Packages
noora
0.86.0
0.86.0
0.85.0
0.84.1
0.84.0
0.83.2
0.83.1
0.83.0
0.82.7
0.82.6
0.82.5
0.82.4
0.82.3
0.82.2
0.82.1
0.82.0
0.81.4
0.81.3
0.81.2
0.81.1
0.81.0
0.80.1
0.80.0
0.79.1
0.79.0
0.78.1
0.78.0
0.77.4
0.77.3
0.77.2
0.77.1
0.77.0
0.76.0
0.75.0
0.74.0
0.73.0
0.72.0
0.71.0
0.70.0
0.69.1
0.69.0
0.68.0
0.67.0
0.66.0
0.65.0
0.64.2
0.64.1
0.64.0
0.63.2
0.63.1
0.63.0
0.62.0
0.61.0
0.60.0
0.59.0
0.58.0
0.57.0
0.56.1
0.56.0
0.55.0
0.54.0
0.53.1
0.53.0
0.52.1
0.52.0
0.51.0
0.50.1
0.50.0
0.49.0
0.48.0
0.47.0
0.46.0
0.45.0
0.44.3
0.44.2
0.44.1
0.44.0
0.43.0
0.42.0
0.41.0
0.40.6
0.40.5
0.40.4
0.40.3
0.40.2
0.40.1
0.40.0
0.39.1
0.39.0
0.38.0
0.37.0
0.36.0
0.35.0
0.34.0
0.33.0
0.32.1
0.32.0
0.31.0
0.30.0
0.29.2
0.29.1
0.29.0
0.28.5
0.28.4
0.28.3
0.28.2
0.28.1
0.28.0
0.27.0
0.26.1
0.26.0
0.25.0
0.24.0
0.23.1
0.23.0
0.22.1
0.22.0
0.21.0
0.20.0
0.19.0
0.18.0
0.17.0
0.16.0
0.15.0
0.14.0
0.13.0
0.12.1
0.12.0
0.11.2
0.11.1
0.11.0
0.10.0
0.9.0
0.8.0
0.7.0
0.6.1
0.6.0
0.5.1
0.5.0
0.4.0
0.3.2
0.3.1
0.3.0
0.2.2
0.2.0
0.1.0
0.1.0-rc.2
0.1.0-rc.1
0.1.0-alpha.6
0.1.0-alpha.5
0.1.0-alpha.4
0.1.0-alpha.3
0.1.0-alpha.2
0.1.0-alpha.1
A component library for Phoenix LiveView applications
Current section
Files
Jump to
Current section
Files
docs/components/statusbadge.md
<!-- 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>
```