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>