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/alert.md
<!-- Generated by scripts/generate-web-components.js. Do not edit directly. -->
# Alert
Communicates contextual information with a semantic status.
```html
<noora-alert status="success" title="Project created"></noora-alert>
```
## Attributes
| Attribute | Type or allowed values | Default | Description |
| --- | --- | --- | --- |
| `type` | `primary`, `secondary` | `"primary"` | Controls the visual emphasis. |
| `status` | `information`, `warning`, `error`, `success` | `"information"` | Sets the semantic status. |
| `size` | `small`, `medium`, `large` | `"medium"` | Controls the alert dimensions and content layout. |
| `dismissible` | `boolean` | `false` | Shows a dismiss control. |
| `show-icon` | `boolean` | `true` | Shows the semantic status icon. |
| `title` | `string` | `""` | Sets the alert title. |
| `description` | `string` | None | Sets the description shown by large alerts. |
## Events
| Event | Type | Description |
| --- | --- | --- |
| `noora-dismiss` | `CustomEvent<Record<string, never>>` | Emitted after the alert is dismissed. |
## Slots
| Slot | Description |
| --- | --- |
| `default` | Rich description content that takes precedence over the description attribute. |
| `action` | Actions displayed beside or below the title. |
## Styling parts
| Part | Description |
| --- | --- |
| `alert` | The alert container. |
| `title` | The title. |
| `description` | The description. |
| `actions` | The action container. |
A dismiss action emits a `noora-dismiss` event and hides the element.
## Types
Use primary alerts by default and secondary alerts for lower emphasis.
```html
<noora-alert type="primary" status="error" title="Insert your text here"></noora-alert>
<noora-alert type="secondary" status="error" title="Insert your text here"></noora-alert>
```
## Sizes
Choose a compact, standard, or descriptive layout.
```html
<noora-alert size="small" status="error" title="Insert your text here"></noora-alert>
<noora-alert size="medium" status="error" title="Insert your text here"></noora-alert>
<noora-alert size="large" status="error" title="Insert your text here" description="Insert your description here. Description in this case is usually two lines"></noora-alert>
```
## Primary statuses
Primary alerts support error, information, success, and warning states.
```html
<noora-alert status="error" title="Insert your text here"></noora-alert>
<noora-alert status="information" title="Insert your text here"></noora-alert>
<noora-alert status="success" title="Insert your text here"></noora-alert>
<noora-alert status="warning" title="Insert your text here"></noora-alert>
```
## Secondary statuses
Secondary alerts provide the same semantic states with lower emphasis.
```html
<noora-alert type="secondary" status="error" title="Insert your text here"></noora-alert>
<noora-alert type="secondary" status="information" title="Insert your text here"></noora-alert>
<noora-alert type="secondary" status="success" title="Insert your text here"></noora-alert>
<noora-alert type="secondary" status="warning" title="Insert your text here"></noora-alert>
```
## Dismissible
Dismiss controls are available in every alert size.
```html
<noora-alert dismissible size="small" status="error" title="Insert your text here"></noora-alert>
<noora-alert dismissible size="medium" status="error" title="Insert your text here"></noora-alert>
<noora-alert dismissible size="large" status="error" title="Insert your text here" description="Insert your description here. Description in this case is usually two lines"></noora-alert>
```
## Actions
Place related actions in the action slot for compact or descriptive alerts.
```html
<noora-alert size="small" status="error" title="Insert your text here">
<noora-link-button slot="action" size="medium" variant="secondary" underline label="Action"></noora-link-button>
</noora-alert>
<noora-alert size="large" status="error" title="Insert your text here" description="Insert your description here. Description in this case is usually two lines">
<noora-link-button slot="action" size="large" variant="secondary" underline label="Action"></noora-link-button>
</noora-alert>
```
## Edge cases
Long content and combined actions preserve the alert layout.
```html
<noora-alert status="information" title="This is a very long title that might wrap to multiple lines in smaller containers or on mobile devices to test text wrapping behavior"></noora-alert>
<noora-alert size="large" status="warning" title="Important Notice" description="This is a very long description that contains multiple sentences and important information. It should properly wrap and maintain readability even when the content extends beyond the typical two-line description. This helps test the layout behavior with extensive content."></noora-alert>
<noora-alert dismissible size="medium" status="success" title="Operation completed successfully">
<noora-link-button slot="action" size="medium" variant="secondary" underline label="View Details"></noora-link-button>
<noora-link-button slot="action" size="medium" variant="secondary" underline label="Dismiss"></noora-link-button>
</noora-alert>
```