Alert

A role="alert" callout box — an icon, a title, a description.

import { Alert, AlertTitle, AlertDescription } from "@pompeitech/vesuvius-ui";

Default

Heads up!

You can add components and dependencies to your app using the CLI.

Variants

Order confirmed

Your order has been placed successfully.

Something went wrong

Your payment could not be processed.

All variants

Beyond default/destructive/success/warning, info and highlight cover the two remaining semantic tones:

Maintenance scheduled

The API will be briefly unavailable Sunday at 2am UTC.

New: dark mode

Switch themes from the settings menu.

Soft appearance

appearance="soft" swaps the outlined variant color for a tinted background — a dashboard-style callout instead of a warning banner. Every variant above supports it.

Usage approaching limit

85% of your monthly quota has been used.

No icon

The icon isn't required — AlertTitle/AlertDescription shift left to fill the space when there's no <svg> child (the layout is driven by a has-[>svg] selector, not a prop):

Session expired

API

Alert

Prop	Type	Default	Description
`variant`	`"default" \| "destructive" \| "success" \| "warning" \| "info" \| "highlight"`	`"default"`	Semantic tone — colors the icon and `AlertTitle`.
`appearance`	`"outline" \| "soft"`	`"outline"`	`"outline"`: a bordered card on `bg-card`. `"soft"`: no border, a tinted background matching the variant.

Plus every native <div> prop (role="alert" is already set).

AlertTitle / AlertDescription — every native <div> prop; no custom props of their own beyond styling hooks.

The root carries role="alert", so screen readers announce it as soon as it mounts (an ARIA live region, assertive priority) — reserve it for messages the user genuinely needs interrupted for. For a message that doesn't need to interrupt (a static inline note, not a live status change), consider a plain styled <div> instead and reach for Alert specifically when the content appears dynamically in response to something the user just did.