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.

Drivn's Alert ships with default, info, success, and destructive variants. Each pairs a color-tuned border, background tint, and text color from the Drivn token system, so informational banners look blue, successes look green, and errors look red without any extra Tailwind configuration. For a project with one or two variants you will not notice the difference; for products that display mixed states across a dashboard, the extra two defaults save a round of variant definition per component.

Use info for non-critical context (a trial countdown), success for completed actions, and destructive for conditions the user must address. Save default for neutral-toned banners like an announcement bar. See the feedback category for how Alert pairs with Toast, Progress, and Tooltip across different 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.