noora/docs/components/banner.md
Displays a page-level message with an optional dismiss action.
<noora-banner status="success" title="Changes saved"></noora-banner>
| 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. |
| Event | Type | Description |
|---|---|---|
noora-dismiss | CustomEvent<Record<string, never>> | Emitted after the banner is dismissed. |
| Slot | Description |
|---|---|
icon | A custom icon used by primary banners. |
| Part | Description |
|---|---|
banner | The banner container. |
title | The title. |
description | The description. |
A dismiss action emits a noora-dismiss event and hides the element.
Banners support primary, error, success, warning, and information states.
<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>
Primary banners accept a custom icon through the icon slot.
<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>
Descriptions are optional, banners can be dismissible, and long content wraps.
<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>