Skip to content
Nana UI

Alert

View .md Download

A contextual message banner for feedback, status and important notices. Supports an optional title, a leading status icon, action buttons and a dismiss control.

Preview

Section titled “Preview”
Heads up — this is an informational alert.

Installation

Section titled “Installation”
Terminal window
npm install @nana-tec/ui-components

Import

Section titled “Import”
import "@nana-tec/ui-components/alert";

Basic usage

Section titled “Basic usage”
<nana-alert variant="info" open style="width:100%">Heads up — this is an informational alert.</nana-alert>

Variants

Section titled “Variants”
Info alert Success alert Warning alert Danger alert Neutral alert

API

Section titled “API”

Properties

PropertyAttributeTypeDefaultDescription
closable—booleanfalseShow a dismiss button that closes the alert
noIconno-iconbooleanfalseHide the leading status icon
open—booleantrueControls visibility. Dismissing sets this to `false`.
title—string''Optional bold heading shown above the message
variant—AlertVariant'info'Visual + semantic style

Events

EventDescription
nana-closeDispatched when the alert is dismissed

Slots

SlotDescription
(default)The alert message / body content
iconCustom leading icon (overrides the default variant icon)
actionsAction buttons shown beneath the message

CSS custom properties

PropertyDescription
--nana-alert-bgCustom background colour
--nana-alert-colorCustom text colour
--nana-alert-borderCustom border colour

Events

Section titled “Events”
EventTypeDescription
nana-closeCustomEventDispatched when the alert is dismissed

Slots

Section titled “Slots”
SlotDescription
(default)The alert message / body content
iconCustom leading icon (overrides the default variant icon)
actionsAction buttons shown beneath the message

CSS Variables

Section titled “CSS Variables”
VariableDefaultDescription
--nana-alert-bg—Custom background colour
--nana-alert-color—Custom text colour
--nana-alert-border—Custom border colour

CSS Parts

Section titled “CSS Parts”
PartDescription
baseThe alert container
iconThe leading status icon
titleThe alert title
messageThe alert message body
actionsThe action buttons container
close-buttonThe dismiss button
Section titled “Related components”

Storybook

Section titled “Storybook”
Explore Alert interactively Every state, prop, and edge case — with live controls — in Storybook.
View in Storybook