React Alert Examples — Variants, Icons, Dismissible

The canonical Drivn Alert is a single component with a title prop for the bold headline and children for the body copy. No wrapper elements, no sub-components, no AlertTitle or AlertDescription imports to remember. The default variant renders a neutral accent background with a subtle border — appropriate for informational banners that do not warrant the visual weight of info or success.

Drop this pattern at the top of a page, inside a card, or as a persistent banner in a dashboard header. The body text can hold an inline link, a code span, or any markup your copy needs — the alert docs show the full API reference.

Alert ships with four variants — default, info, success, and destructive — and each one is a single entry in the styles.variants object. The design tokens do the coloring: info pulls bg-info/10 with an info border and text, success maps to the green token, and destructive to red, so a blue notice, a green confirmation, and a red error all read correctly without a line of extra Tailwind config. shadcn/ui ships two variants by comparison, so the extra info and success presets save you a round of variant plumbing whenever a dashboard mixes states.

Reach for info on non-critical context like a trial countdown, success on a completed action, and destructive on anything the user has to fix. Keep default for neutral announcement bars where a colored tint would over-signal. See the feedback category for how Alert sits alongside Toast, Progress, and Tooltip across a product's surfaces.

The icon prop accepts either a component reference (icon={Info}) or a pre-rendered React element (icon={<Info className="size-5 text-primary" />}). The component-reference form is concise and matches the pattern used by the Button (leftIcon={Plus}). Use it for the common case where the default icon size and color are fine.

The element form gives per-alert control — a larger icon on a hero banner, a custom color for a branded variant, or an inline SVG that is not in your Lucide set. Any component matching ComponentType<{ className?: string }> works, so you can pass a third-party icon set or a project-specific SVG component without adapters. See the theming guide for how to tint icons via token colors.

Drivn's Alert does not ship a built-in close button because most alert surfaces do not need one — inline errors resolve when the user fixes the underlying issue; status banners stay until the status changes. For the cases that do need dismissal (announcement bars, first-run tips, paid-feature upsells), wrap the Alert in a component that owns an open state and conditionally renders.

The snippet below adds a close button in the top-right corner using the Button with variant="ghost" and an X icon. Persist the dismissed state with localStorage if the alert should stay gone across page loads. For a stack of alerts that auto-dismiss on a timer, use the Toast component instead — toasts are built for transient notifications with a timeline.

Server-returned errors, CMS-driven announcements, and notification lists all arrive as arrays of objects. Map over the array and render one Alert per item. Use the object's stable id as the React key, the variant field as the alert's variant, and the message field as children. Pair with a filter to show only active alerts, or with a sort to put the most severe at the top of the list.

This pattern also works for per-field form errors — render one destructive Alert above the form for server-side failures that touch multiple fields at once. For field-level inline errors, use each input's error prop instead — see the React Hook Form guide for the full form-integration pattern.