Alert

A contextual banner for feedback, status and important notices. Supports an optional title, a leading status icon, action buttons and a dismiss control, with the right ARIA role wired up per variant.

Variants

A new version is available.

Your changes have been saved.

Your trial ends in 3 days.

We couldn't process your payment.

variants.html

html

1	<nana-alert variant="info">A new version is available.</nana-alert>
2	<nana-alert variant="success">Your changes have been saved.</nana-alert>
3	<nana-alert variant="warning">Your trial ends in 3 days.</nana-alert>
4	<nana-alert variant="danger">We couldn't process your payment.</nana-alert>

With Title

Your profile has been updated successfully.

title.html

html

1	<nana-alert variant="success" title="Saved">
2	Your profile has been updated successfully.
3	</nana-alert>

Dismissible

Your password will expire soon — update it from your account settings.

closable.html

html

1	<nana-alert variant="warning" title="Heads up" closable>
2	Your password will expire soon — update it from your account settings.
3	</nana-alert>

With Actions

We couldn't process your card ending in 4242. Retry

Update card

actions.html

html

1	<nana-alert variant="danger" title="Payment failed">
2	We couldn't process your card ending in 4242.
3	<nana-button slot="actions" variant="danger" size="sm">Retry</nana-button>
4	<nana-button slot="actions" variant="ghost" size="sm">Update card</nana-button>
5	</nana-alert>

Icon Options

A plain message with no leading icon.

You can drag cards to reorder them.

no-icon.html

html

1	<nana-alert variant="info" no-icon>
2	A plain message with no leading icon.
3	</nana-alert>

custom-icon.html

html

1	<nana-alert variant="info" title="Pro tip">
2	<nana-icon slot="icon" name="information-circle"></nana-icon>
3	You can drag cards to reorder them.
4	</nana-alert>

Customization

Reach for a variant first. To match a brand, three colour variables cover it; the parts handle anything finer.

Themed with three CSS variables.

alert.css

css

1	/* Variant covers the common cases; override colours to match a brand */
2	nana-alert.brand {
3	--nana-alert-bg: #eef2ff;
4	--nana-alert-color: #3730a3;
5	--nana-alert-border: #c7d2fe;
6	}
7
8	/* Parts give full control of the internals */
9	nana-alert::part(title) { letter-spacing: 0.01em; }

CSS Variable	Description
`--nana-alert-bg`	Background colour
`--nana-alert-color`	Text colour
`--nana-alert-border`	Border colour

Part	Description
`base`	The alert container
`icon`	The leading icon
`title`	The heading
`message`	The body content
`actions`	The actions row
`close-button`	The dismiss button

Props

Attribute	Type	Default	Description
`variant`	`info \| success \| warning \| danger \| neutral`	`info`	Visual and semantic style
`title`	`string`	`""`	Optional bold heading shown above the message
`no-icon`	`boolean`	`false`	Hide the leading status icon
`closable`	`boolean`	`false`	Show a dismiss button that closes the alert
`open`	`boolean`	`true`	Controls visibility; dismissing sets it to `false`

Slots

Slot	Description
`(default)`	The alert message / body content
`icon`	Custom leading icon (overrides the default variant icon)
`actions`	Action buttons shown beneath the message

Events

Event	Description
`nana-close`	Dispatched when the alert is dismissed

Accessibility

danger and warning alerts use role="alert" with aria-live="assertive" so they interrupt; the others announce politely with role="status".
The leading icon is decorative (aria-hidden); meaning is carried by the text, not colour alone.
The dismiss button has an accessible aria-label="Dismiss" and a visible focus ring.