Trivela UI

Alert

Calls out a message that needs attention, with variant and color token support.

Alert carries role="alert", so one inserted after page load is announced immediately. An alert already present at load is not — that is the role working as intended, not a bug. For a passive message that should not interrupt, pass role="status".

Usage

alert-demo.tsx
import { Alert } from 'trivela-ui';

export function Example() {
  return (
    <Alert variant="subtle" color="info" icon title="Information">
      A short description of this notification appears here.
    </Alert>
  );
}

Examples

With icon and title

Pass icon to get the icon matching the color, and title for the heading. Each color carries its own glyph, so the meaning is not left to colour alone.

Dismissible

Pass onDismiss to get the close button. Alert does not hide itself — it reports the intent and you own the state, so a controlled list cannot desync.

Custom icon

Pass any node instead of true to replace the default — any lucide icon, or your own SVG.

Colors

Colors carry the severity. The default color is info, not primary.

Variants

Solid draws a tinted panel with a border; subtle drops the border; ghost drops the fill too.

Composed by hand

Without icon, title, or onDismiss, Alert is just the panel and your markup stacks inside it as-is — useful when the heading needs a layout the title prop cannot give.

API Reference

PropTypeDefaultDescription
variant'solid' | 'ghost' | 'outline' | 'subtle''solid'Style variant for the component.
color'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info' | 'neutral''info'Color scale used by the component.
iconboolean | ReactNode—true renders the icon matching color; pass a node for your own. Omit for no icon.
titleReactNode—Heading above the description.
onDismiss() => void—Renders the close button and fires on click. Alert does not hide itself.
dismissLabelstring'Dismiss'Accessible name for the close button.
classNamestring—Merged with the generated classes via cn().
...propsHTMLAttributes<HTMLDivElement>—Forwarded to the root. role defaults to 'alert' and can be overridden with 'status'.