Packages
noora
0.85.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/badge.md
<!-- Generated by scripts/generate-web-components.js. Do not edit directly. -->
# Badge
Labels an item with compact status or categorization information.
```html
<noora-badge color="success">Available</noora-badge>
```
## Attributes
| Attribute | Type or allowed values | Default | Description |
| --- | --- | --- | --- |
| `aria-label` | `string` | None | Provides an accessible name when visible text is unavailable. |
| `appearance` | `fill`, `light-fill` | `"fill"` | Controls whether the badge uses a solid or light fill. |
| `color` | `neutral`, `destructive`, `warning`, `attention`, `success`, `information`, `focus`, `primary`, `secondary` | `"neutral"` | Controls the semantic color. Disabled badges ignore this value. |
| `size` | `small`, `large` | `"small"` | Controls the badge dimensions and text size. |
| `disabled` | `boolean` | `false` | Uses the disabled presentation regardless of color. |
| `dot` | `boolean` | `false` | Displays a dot before the label when the icon slot is empty. |
| `icon-only` | `boolean` | `false` | Hides the label and displays only the icon slot. |
| `label` | `string` | `""` | Provides fallback text when the default slot is empty. |
## Slots
| Slot | Description |
| --- | --- |
| `default` | The visible label. |
| `icon` | An icon displayed before the label. It takes precedence over dot. |
## Styling parts
| Part | Description |
| --- | --- |
| `badge` | The badge container. |
| `icon` | The icon or dot container. |
| `label` | The visible label. |
Use the standard `::part()` selector when an application needs a targeted override:
```css
noora-badge::part(badge) {
text-transform: uppercase;
}
```
The browser component uses appearance for the visual style because style is a native element property. The Phoenix component keeps its existing style attribute, and both map to the same contract value.
A slotted icon takes precedence over the generated dot.
## Colors
Colors communicate semantic meaning while sharing the same compact shape.
```html
<noora-badge color="neutral">Neutral</noora-badge>
<noora-badge color="destructive">Destructive</noora-badge>
<noora-badge color="warning">Warning</noora-badge>
<noora-badge color="attention">Attention</noora-badge>
<noora-badge color="success">Success</noora-badge>
<noora-badge color="information">Information</noora-badge>
<noora-badge color="focus">Focus</noora-badge>
<noora-badge color="primary">Primary</noora-badge>
<noora-badge color="secondary">Secondary</noora-badge>
```
## Appearances and sizes
Use a light fill for lower emphasis and choose between small and large sizing.
```html
<noora-badge appearance="fill" size="small" color="success">Small fill</noora-badge>
<noora-badge appearance="light-fill" size="small" color="success">Small light fill</noora-badge>
<noora-badge appearance="fill" size="large" color="information">Large fill</noora-badge>
<noora-badge appearance="light-fill" size="large" color="information">Large light fill</noora-badge>
```
## Icons and states
Use a generated dot, provide an icon through its named slot, or apply the disabled presentation.
```html
<noora-badge dot color="success">Online</noora-badge>
<noora-badge appearance="light-fill" color="warning">
<svg slot="icon" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor">
<circle cx="12" cy="12" r="9" stroke-width="2"></circle>
<path d="M12 7v6" stroke-width="2"></path>
<path d="M12 17h.01" stroke-width="2"></path>
</svg>
Needs attention
</noora-badge>
<noora-badge disabled>Disabled</noora-badge>
```