# Alert An inline message in the page: something saved, something failed, something to know before going on. It has a title, an optional description and action, and a close button when you pass `onDismiss`. Destructive and warning alerts are spoken at once (`role="alert"`); the others politely (`role="status"`). ```tsx import { Alert } from "@/components/ouro/alert/alert"; ``` ## Example ```tsx Try again} 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`. | Prop | Type | Default | Description | | --- | --- | --- | --- | | `action` | `ReactNode` | | A control under the description, usually a small Button: `action={Retry}`. | | `className` | `string` | | Layout only: margins, width, grid placement (`mt-4`). Appearance classes warn in development; use `tone`. | | `description` | `ReactNode` | | More detail, or what to do next, under the title. | | `dismissLabel` | `string` | `"Dismiss"` | The close button's accessible name, for other languages. | | `icon` | `AlertIcon \| null` | | The icon at the start, as a component: `icon={WifiOffIcon}`. Each tone has its own by default; `null` shows none. | | `onDismiss` | `(() => 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` | `Ref` | | Reaches the rendered element. | | `title` (required) | `ReactNode` | | What happened, in a few words: "Recipe saved", "Couldn't save". Required, so every alert says what it is about. | | `tone` | `"primary" \| "secondary" \| "destructive" \| "success" \| "warning"` | `"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`: ``. - `onClose`: Not a prop. Ouro UI uses `onDismiss`: ` setOpen(false)}>`. - `severity`: Not a prop. Ouro UI uses `tone`: ``. - `status`: Not a prop. Ouro UI uses `tone`: ``. - `variant`: Not a prop. Ouro UI uses `tone`: ``. ## `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`. ```ts type AlertIcon = ComponentType>; ``` [^layout-classes]: test:registry/ouro/components/ouro/alert/alert.test.tsx::Alert > forwards a ref and lets app layout classes win verify:testExists(registry/ouro/components/ouro/alert/alert.test.tsx::Alert > forwards a ref and lets app layout classes win)