Error Alert

A destructive inline alert reporting a failed action, with an inline retry action alongside the manual dismiss control.

Your card was declined. Update your payment method or try again.

Alerts & Toastsalertbannererrordestructiveaction

Stack: React + Tailwind CSS + shadcn/ui — every prompt is written for this stack and is most accurate in it.

Dependencies: lucide-react

Overview

Layout

Icon chip + title/description + inline action button

Color

bg-destructive/10 icon chip + destructive Button variant

Actions

Retry payment (recovers) / close (dismisses only)

Accessibility

role="alert" — announced assertively