Back to Alert Dialogs
Low Balance
A neutral caution alert dialog with a large balance readout, a depletion gauge, and selectable quick top-up amounts.
Your balance is running low
Top up now to avoid any interruption to your active services.
$3.20
Alert Dialogsdialogalert-dialogmodalcautionbilling
Stack: React + Tailwind CSS + shadcn/ui — every prompt is written for this stack and is most accurate in it.
Dependencies: lucide-react
Overview
Layout
Balance readout + gauge + 3 selectable top-up chips
Color
bg-muted icon chip — neutral, no accent color borrowed
Motion
150ms color transition on chip select/hover
Actions
Later (dismiss) / Add $<amount> (confirm, label tracks selection)