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/tag.md
<!-- Generated by scripts/generate-web-components.js. Do not edit directly. -->
# Tag
Displays a compact label with optional icon and dismissal.
```html
<noora-tag label="Active"></noora-tag>
```
## Attributes
| Attribute | Type or allowed values | Default | Description |
| --- | --- | --- | --- |
| `label` | `string` | `""` | Sets the visible label. |
| `dismissible` | `boolean` | `false` | Shows a dismiss control. |
| `dismiss-value` | `string` | None | Adds a value to the dismiss event. |
| `icon` | `string` | None | Sets a Noora icon before the label. |
| `disabled` | `boolean` | `false` | Disables dismissal. |
## Events
| Event | Type | Description |
| --- | --- | --- |
| `noora-dismiss` | `CustomEvent<{ value: string \| undefined }>` | Emitted when the tag dismiss control is activated. |
## Slots
| Slot | Description |
| --- | --- |
| `icon` | A custom icon that takes precedence over the icon attribute. |
## Styling parts
| Part | Description |
| --- | --- |
| `tag` | The tag container. |
| `label` | The label. |
| `dismiss` | The dismiss control. |
Dismissal emits a `noora-dismiss` event.
## Basic tags
Render plain tags and tags with different icons.
```html
<noora-tag label="Simple Tag"></noora-tag>
<noora-tag label="Category" icon="category"></noora-tag>
<noora-tag label="User" icon="user"></noora-tag>
```
## Dismissible states
Allow removal when a tag represents editable input.
```html
<noora-tag label="Dismissible Tag" icon="category" dismissible></noora-tag>
<noora-tag label="Fixed Tag" icon="category"></noora-tag>
<noora-tag label="Remove Me" dismissible></noora-tag>
```
## Disabled states
Disable plain, icon, and dismissible tags.
```html
<noora-tag label="Disabled Tag" disabled></noora-tag>
<noora-tag label="Disabled" icon="category" disabled></noora-tag>
<noora-tag label="Disabled Dismissible" icon="category" dismissible disabled></noora-tag>
```
## Content variations
Support short, long, version, and status labels.
```html
<noora-tag label="New" dismissible></noora-tag>
<noora-tag label="Very Long Tag Label That Might Wrap" icon="category" dismissible></noora-tag>
<noora-tag label="v2.1.0" icon="git_branch"></noora-tag>
<noora-tag label="In Progress" icon="progress_x" dismissible></noora-tag>
```