React Alert Dialog - Information with Status Badge
An informational alert dialog with a status badge below the title for categorizing message urgency or type
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Status needs signaling—upcoming maintenance feels different from in-progress outage. This React alert dialog adds a blue Upcoming badge between title and description, giving users instant context about timing and severity. Built with shadcn/ui and Radix UI with proper dark mode support (bg-blue-100/blue-900), the pill-shaped badge creates visual hierarchy without dominating the message. Perfect for scheduled maintenance notices, phased rollout announcements, or any time-sensitive information where status context (Upcoming, In Progress, Scheduled) helps users prioritize attention and plan accordingly.
Pattern created by @haydenbleasel
Installation
npx shadcn@latest add https://www.shadcn.io/registry/alert-dialog-informational-6.jsonnpx shadcn@latest add https://www.shadcn.io/registry/alert-dialog-informational-6.jsonpnpm dlx shadcn@latest add https://www.shadcn.io/registry/alert-dialog-informational-6.jsonbunx shadcn@latest add https://www.shadcn.io/registry/alert-dialog-informational-6.jsonRelated patterns you will also like
Information with Icon
Icon-based identification
Badge Component
Standalone badge styling patterns
Destructive with Badge
Badge in warning context
Simple Information Alert
Minimal alert without status
Success with Badge
Badge in success context
Standard Dialog
General dialog for custom content
Questions you might have
React Alert Dialog - Information with Centered Icon
An informational alert dialog with a large centered icon in a colored circle for high-impact tips and educational moments
React Alert Dialog - Information with Highlighted Content
An informational alert dialog with bordered feature cards highlighting multiple items in a scannable list format