Alert

Install

import { Alert } from "@/components/ouro/alert/alert";

Example

<Alert tone="success" title="Recipe saved" />
<Alert
  tone="destructive"
  title="Couldn't save"
  description="Check your connection and try again."
  action={<Button size="sm" onClick={retry}>Try again</Button>}
  onDismiss={() => setError(null)}
/>

Usage

In and around forms, use Alert for a message that belongs to neither a field nor the form as a whole: a reorder or a deletion the server refused, a step that could not be parsed. Render it where the action was taken, with action for the way out.

Use instead when

• Use Toast instead for a brief message that disappears by itself, ConfirmDialog to ask before a destructive action, and Field's error for a message about one field.
• Use Form's errors instead for what a submit returned: a field's name as the key puts the message under that field, and the form key shows it at the top of the form.

Props

Type: AlertProps.

action

Type: ReactNode

A control under the description, usually a small Button: action={<Button size="sm">Retry</Button>}.

className

Type: string

Layout only: margins, width, grid placement (mt-4). Appearance classes warn in development; use tone.

description

Type: ReactNode

More detail, or what to do next, under the title.

dismissLabel

Type: string

Default: "Dismiss"

The close button's accessible name, for other languages.

icon

Type: AlertIcon | null

The icon at the start, as a component: icon={WifiOffIcon}. Each tone has its own by default; null shows none.

onDismiss

Type: (() => void)

Shows a close button that calls this. Remove the alert from your state in it. When the alert goes, keyboard focus moves to the next control after it, or to the one before it when nothing follows, so it is not lost to the page.

ref

Type: Ref<HTMLDivElement>

Reaches the rendered element.

title (required)

Type: ReactNode

What happened, in a few words: "Recipe saved", "Couldn't save". Required, so every alert says what it is about.

tone

Type: "primary" | "secondary" | "destructive" | "success" | "warning"

Default: "secondary"

Color role from the theme, which also sets how urgently screen readers hear it: destructive and warning are role="alert" (spoken at once), the others role="status" (spoken politely). primary is for information, secondary for a neutral note. shadcn's variant="destructive" is tone="destructive".

Native attributes

Also accepts the attributes in React's HTMLAttributes (id, aria-*, event handlers), passed to the rendered element, except those named on this page.

Don't use

These are not props. Passing one fails the type check with the fix in the error, and in development a console message names the fix.

• children: Not a prop. Alert takes title and description: <Alert title="…" description="…">.
• onClose: Not a prop. Ouro UI uses onDismiss: <Alert onDismiss={() => setOpen(false)}>.
• severity: Not a prop. Ouro UI uses tone: <Alert tone="destructive">.
• status: Not a prop. Ouro UI uses tone: <Alert tone="primary">.
• variant: Not a prop. Ouro UI uses tone: <Alert tone="destructive">.

className is for layout only

Pass margins, width and grid placement (mt-4, w-full, col-span-2). Your classes always win over Ouro UI's: Alert merges className last with cn (tailwind-merge), so a class that conflicts with its own replaces it.^{layout-classes}

Appearance comes from props, not classes. In development, a class that sets appearance logs one warning per component instance, naming the prop to use instead. A class sets appearance when, after its variants (hover:, sm:) and any ! are removed, it starts with bg-, text-, border-, rounded-, shadow-, font-, ring-, from-, via-, to-, fill- or stroke-, or is border, rounded, shadow or ring, or has a dark: variant. Text wrapping, overflow and table layout classes (text-wrap, text-ellipsis, border-collapse) are layout and do not warn.

Alignment classes (text-center) warn too: set alignment on a parent element.

Types

AlertIcon

An icon component, such as one from lucide-react or @heroicons/react.

type AlertIcon = ComponentType<SVGProps<SVGSVGElement>>;