Alert

A message in the flow of the page: information, or an error with its destructive colour. For a message that floats over the page, use Toast.

Installation

npx rasengan-ui add alert

Or with the shadcn CLI, from the registry:

npx shadcn@latest add https://ui.rasengan.dev/r/base/alert.json

Usage

import { InfoIcon } from "lucide-react";
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
 
export function Heads() {
  return (
    <Alert>
      <InfoIcon />
      <AlertTitle>Heads up</AlertTitle>
      <AlertDescription>You can switch village at any time from the settings.</AlertDescription>
    </Alert>
  );
}

Variants and tones

default is a card; soft washes it in the tone; outline drops the fill for a border in the tone. tone is neutral by default (the village's ink), or primary, success, warning, info, destructive: on default it colours the icon and the title, on soft and outline the surface too. The description stays in the page's text colour, so it reads at full contrast.

<Alert variant="soft" tone="success" role="status">…</Alert>

Destructive

variant="destructive", as in shadcn, colours the title, the icon, the description and the border.

Villages

Card surface, village radius and border; the icon column lines up with the title.

Accessibility

• It has role="alert", so a screen reader announces it as soon as it appears. For a message present from the start that needs no announcement, pass role="status" or role="note".

API reference

Alert, AlertTitle and AlertDescription, each a <div>. Alert takes: