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/banner.md
<!-- Generated by scripts/generate-web-components.js. Do not edit directly. -->
# Banner
Displays a page-level message with an optional dismiss action.
```html
<noora-banner status="success" title="Changes saved"></noora-banner>
```
## Attributes
| Attribute | Type or allowed values | Default | Description |
| --- | --- | --- | --- |
| `status` | `primary`, `error`, `success`, `warning`, `information` | `"primary"` | Sets the semantic status. |
| `title` | `string` | `""` | Sets the banner title. |
| `description` | `string` | None | Sets the optional description. |
| `dismissible` | `boolean` | `false` | Shows a dismiss control. |
## Events
| Event | Type | Description |
| --- | --- | --- |
| `noora-dismiss` | `CustomEvent<Record<string, never>>` | Emitted after the banner is dismissed. |
## Slots
| Slot | Description |
| --- | --- |
| `icon` | A custom icon used by primary banners. |
## Styling parts
| Part | Description |
| --- | --- |
| `banner` | The banner container. |
| `title` | The title. |
| `description` | The description. |
A dismiss action emits a `noora-dismiss` event and hides the element.
## Statuses
Banners support primary, error, success, warning, and information states.
```html
<noora-banner status="primary" title="Primary status" description="I am a primary banner"></noora-banner>
<noora-banner status="error" title="Error status" description="I am an error banner"></noora-banner>
<noora-banner status="success" title="Success status" description="I am a success banner"></noora-banner>
<noora-banner status="warning" title="Warning status" description="I am a warning banner"></noora-banner>
<noora-banner status="information" title="Information status" description="I am an information banner"></noora-banner>
```
## Custom icon
Primary banners accept a custom icon through the icon slot.
```html
<noora-banner status="primary" title="Primary status" description="I am a primary banner with a custom icon">
<noora-icon slot="icon" name="alert_circle"></noora-icon>
</noora-banner>
```
## Content variations
Descriptions are optional, banners can be dismissible, and long content wraps.
```html
<noora-banner status="primary" title="Title only banner"></noora-banner>
<noora-banner dismissible status="warning" title="Dismissible banner" description="This banner can be dismissed by the user"></noora-banner>
<noora-banner status="information" title="Banner with longer content" description="This is a banner with much longer descriptive text that demonstrates how the component handles multiple lines of content and text wrapping behavior"></noora-banner>
```