components / alert

Alert

Inline message with a title, description, icon, optional action and a close button.

How to use

Use it for feedback tied to a place on the page, such as form validation or an integration status. `warning` and `danger` are announced assertively (`role="alert"`), the others politely. The close button only appears with `onDismiss`. For transient notices use `Toast`, for page-wide ones `Banner`.

preview

Saved

Your changes were saved.

Unsaved changes

You have pending edits.

Alert.tsx

import { Alert, Button } from "vaiperui";
 
<Alert variantColor="success" title="Saved">
  Your changes were saved.
</Alert>
<Alert
  variantColor="warning"
  title="Unsaved changes"
  action={<Button size="sm" variant="transparent">Save now</Button>}
  onDismiss={() => setOpen(false)}
>
  ...
</Alert>

Colors

preview

primary

success

warning

danger

colors.tsx

<Alert variantColor="primary">primary</Alert>
<Alert variantColor="success">success</Alert>
<Alert variantColor="warning">warning</Alert>
<Alert variantColor="danger">danger</Alert>

Sizes

preview

sizes.tsx

<Alert size="sm">sm</Alert>
<Alert size="md">md</Alert>
<Alert size="lg">lg</Alert>

Custom color

preview

Violet

custom-color.tsx

<Alert customColor="#8b5cf6">Violet</Alert>

Props

Prop	Values	Default	Description
variantColor	primary \| success \| warning \| danger	primary	Color and default icon. warning and danger use role=alert, the rest role=status
customColor	string \| { light, dark }	none	Any CSS color (or a pair per theme). Overrides variantColor
size	sm \| md \| lg	md	Padding and text size
radius	none \| sm \| md \| lg \| full	lg	Corner rounding
title	ReactNode	none	Bold summary above the description (the children)
icon	ReactNode \| false	status icon	Your own icon, or false to hide it
action	ReactNode	none	Slot for an action, such as a small ghost Button or a link
onDismiss	() => void	none	Shows the close button and runs on click; you decide whether to unmount
dismissLabel	string	Dismiss	Accessible name of the close button
(native)	HTMLAttributes<HTMLDivElement>	none	role (overrides the default), className, style, aria-*, ref, etc.

Accessibility

Warning and danger use `role="alert"` (assertive); primary and success use `role="status"` (polite).
Pass `role` to override the default, for example `role="status"` on a danger alert that should not interrupt.
The default status icon is `aria-hidden`; it is decoration and carries no meaning for screen readers.
The close button is a real `<button>` with `aria-label` from `dismissLabel` (default "Dismiss") and a visible focus ring.
The `action` slot renders your own element, so keep it focusable (a button or link) with a clear label.

Keep in mind

Translate `dismissLabel` yourself; the default is English.
Do not rely on color alone: always include a `title` or text that states the meaning.
Dismissing does not move focus; if the alert had focus inside, send it somewhere sensible in `onDismiss`.