ComponentsOverlays & feedback

Alert

A persistent inline status message in a page, card or form: an unsaved revision, a missing tax ID, a filing deadline, a subscription banner. Six tones, three variants, optional actions and dismiss. Server-compatible.

components/alert.tsxtheme · material · accent · density · font

This post has an unsaved revision

An autosave from 10:42 is newer than the published version.

Scheduled for Nov 11, 09:00

Subscribers get the newsletter 10 minutes after publishing.

Domain verified

vamos.ist is connected and serving HTTPS.

Payroll filing due in 3 days

Submit the November declaration before Dec 26 to avoid a late fee.

This company has no tax ID

Invoices to Northwind Trading can't be issued until you add one.

New: saved views

Save filters on any list and share them with your team.

Installation

$ pnpm add @vamos-ui/react

The whole kit as one package — get updates by bumping the version. Add the styles to globals.css: @import "@vamos-ui/react/styles.css";

Usage

import { Alert, Button } from "@vamos-ui/react";

<Alert tone="warning" title="Payroll filing due in 3 days" actions={<Button size="xs">Review</Button>}>
  Submit the November declaration before Dec 26.
</Alert>

Examples

Variants and sizes

soft (default), outline, sm, and icon={false}.

Soft (default)

A tinted surface with a hairline border.

Outline

No fill — for dense settings pages.

Small, without a title — inside cards and form sections.

No icon: pass icon={false}.

Actions and dismiss (CMS)

actions sit under the text; onDismiss adds a localized close button.

A newer revision exists

Zeynep Arslan edited this post 12 minutes ago. Restoring replaces your current draft.

Form submit error

An alert inserted after submit uses live="assertive" (role="alert") so it is announced.

API

Alert

Prop	Type	Default
`tone` Icon, title and tint colour. Body text stays --fg for contrast.	`"neutral" \| "info" \| "success" \| "warning" \| "danger" \| "accent"`	`"neutral"`
`variant` Tinted card, hairline only, or a full-width strip.	`"soft" \| "outline" \| "banner"`	`"soft"`
`size` Padding, text and icon size.	`"sm" \| "md"`	`"md"`
`title` Bold first line in the tone colour.	`ReactNode`	`—`
`children` The message.	`ReactNode`	`—`
`icon` Custom icon or none. Each tone has a default.	`ReactNode \| false`	`—`
`actions` Buttons or links — below the text, inline for banners.	`ReactNode`	`—`
`onDismiss` Adds a close button (client components only).	`() => void`	`—`
`dismissLabel` Accessible name of the close button (dictionary alert.dismiss).	`string`	`"Dismiss"`
`live` For alerts inserted at runtime: polite → role="status", assertive → role="alert". Leave unset for static messages.	`"polite" \| "assertive"`	`—`

AlertTitle / AlertDescription / AlertActions

Prop	Type	Default
`className` Compose your own layout inside an Alert with these parts.	`string`	`—`

Alert Dialog

Announcement bar