Alert

Preview

Heads up — this is an informational alert.

Show code Copy

Installation

The alert ships for all three targets. Pick the tab for your project — the CLI detects which you are on and serves the matching implementation.

React

npx @nana-tec/ui add alert

Lands as src/components/ui/alert/alert.tsx, styled with Tailwind classes that resolve to the design tokens. Requires Tailwind v4.

Svelte

npx @nana-tec/ui add alert

Lands in src/lib/components/ui/alert/ as Alert.svelte, styled with Tailwind classes that resolve to the design tokens. Requires Tailwind v4.

Web Components

Install the package for a versioned dependency:

npm install @nana-tec/ui-components

Or copy the source in and own it:

npx @nana-tec/ui add alert

Usage

React

import { Alert } from "@/components/ui/alert";

export function Example() {
  return <Alert variant="info">Heads up — this is an informational alert.</Alert>;
}

title, icon and actions take nodes. Passing onDismiss renders the close button — the alert does not hide itself, so keep the visibility in your own state:

{shown && (
  <Alert variant="danger" title="Payment failed" onDismiss={() => setShown(false)}>
    Your card was declined.
  </Alert>
)}

Svelte

<script lang="ts">
  import { Alert } from '$lib/components/ui/alert';
</script>

<Alert variant="info">Heads up — this is an informational alert.</Alert>

title is a string; icon and actions are snippets. Passing onDismiss renders the close button — the alert does not hide itself:

<script lang="ts">
  let shown = $state(true);
</script>

{#if shown}
  <Alert variant="danger" title="Payment failed" onDismiss={() => (shown = false)}>
    Your card was declined.
  </Alert>
{/if}

Web Components

import "@nana-tec/ui-components/alert";

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

Note

The live previews on this page render the Web Components build, because that is what runs in a page without a framework runtime. The variants, sizes and states are identical across all three, so what you see is what you get in React and Svelte too.

Classes you pass to the React and Svelte components are merged with tailwind-merge, so an override wins rather than fighting. See Using Tailwind.

Variants

Info alert Success alert Warning alert Danger alert Neutral alert

Show code Copy

API

The React and Svelte props, read from the components’ own types:

React

Alert

Prop	Type	Default
variant	AlertVariant	'info'
title	ReactNode	—
icon	ReactNode	—
actions	ReactNode	—
onDismiss	() => void	—
children	ReactNode	—

Also accepts Omit<HTMLAttributes<HTMLDivElement>, 'title' | 'children'>.

Svelte

Alert

Prop	Type	Default
variant	AlertVariant	'info'
title	string	—
icon	Snippet	—
actions	Snippet	—
onDismiss	() => void	—
children	Snippet	—

Also accepts Omit<HTMLAttributes<HTMLDivElement>, 'class' | 'title'>.

The attribute names, events and CSS hooks below are the Web Components reference.

Properties

Property	Attribute	Type	Default	Description
closable	closable	boolean	false	Show a dismiss button that closes the alert
noIcon	no-icon	boolean	false	Hide the leading status icon
open	open	boolean	true	Controls visibility. Dismissing sets this to false.
title	title	string	''	Optional bold heading shown above the message
variant	variant	AlertVariant	'info'	Visual + semantic style

Events

Event	Description
nana-close	Dispatched when the alert is dismissed

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

CSS parts

Part	Description
::part(actions)	The trailing actions area
::part(base)	The alert container
::part(close-button)	The dismiss button, when closable
::part(icon)	The leading status icon
::part(message)	The message body
::part(title)	The title line

CSS custom properties

Property	Description
--nana-alert-bg	Custom background colour
--nana-alert-color	Custom text colour
--nana-alert-border	Custom border colour

Events

Event	Type	Description
nana-close	CustomEvent	Dispatched when the alert is dismissed

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

CSS Variables

Variable	Description
--nana-alert-bg	Custom background colour
--nana-alert-color	Custom text colour
--nana-alert-border	Custom border colour

CSS Parts

Part	Description
base	The alert container
icon	The leading status icon
title	The alert title
message	The alert message body
actions	The action buttons container
close-button	The dismiss button

Related components

• Badge
• Skeleton
• Tag
• Spinner
• Progress Bar

Storybook

Explore Alert interactively Every state, prop, and edge case — with live controls — in Storybook.

View in Storybook