Alert

Dismissible alert messages.

Colour variants

Alerts communicate status messages. Every variant has a default, solid, and accent style.

Info

An informational message.

Success

Your changes were saved.

Warning

Check your input before continuing.

Danger

Something went wrong.

<div class="na-alert na-alert-info">
  <div class="na-alert-body">
    <div class="na-alert-title">Info</div>
    <div class="na-alert-text">An informational message.</div>
  </div>
</div>

Solid alerts

Solid info alert.

Solid success alert.

Solid warning alert.

Solid danger alert.

<div class="na-alert na-alert-solid-success">
  <div class="na-alert-body">Changes saved!</div>
</div>

Accent (left-border) alerts

Tip

Use accented alerts for tips or callouts.

Attention

This action is irreversible.

<div class="na-alert na-alert-accent-info">...</div>

Dismissible

Saved

Your profile was updated successfully.

<div class="na-alert na-alert-success" na-alert>
  <div class="na-alert-body">
    <div class="na-alert-title">Saved</div>
    <div class="na-alert-text">Changes saved successfully.</div>
  </div>
  <button class="na-alert-close" aria-label="Dismiss">&times;</button>
</div>

Sizes

Small alert

Default (md) alert

Large alert

<div class="na-alert na-alert-info na-alert-s">...</div>
<div class="na-alert na-alert-info na-alert-l">...</div>

Class reference

Class	Description
`na-alert`	Base alert container
`na-alert-icon / body / title / text / close`	Inner slots
`na-alert-info / success / warning / danger / primary / neutral`	Colour variants
`na-alert-solid-*`	Filled solid backgrounds
`na-alert-accent-*`	Left-border accent style
`na-alert-xs / s / m / l / xl / 2xl / 3xl`	Size scale
`na-alert`	Enables dismiss JS behaviour