Alert web component

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

Types

Use primary alerts by default and secondary alerts for lower emphasis.

<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.

<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.

<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.

<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.

<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.

<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.

<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>