Banner

Displays a page-level message with an optional dismiss action.

Banner web component

Displays a page-level message with an optional dismiss action.

Setup

import "@tuist/noora/tokens.css";
import "@tuist/noora/web-components";

Statuses

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>

Custom icon

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>

Content variations

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>

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

Name	Description
`icon`	A custom icon used by primary banners.

Styling parts

Name	Description
`banner`	The banner container.
`title`	The title.
`description`	The description.

Behavior

A dismiss action emits a `noora-dismiss` event and hides the element.