A compact, actionable warning notification that surfaces issues without interrupting the user’s flow. The banner pairs a yellow caution icon with a clear title and supporting message so users instantly understand what happened. Two inline CTAs—Ignore and Show me—let people decide between dismissing or jumping straight to the problem view. A subtle bottom progress bar communicates auto-dismiss timing, reducing clutter when no action is needed. The card is fully dismissible via the close icon and animates smoothly in/out to feel lightweight. Built for modern apps that need informative, low-friction alerts on mobile and web.

Functionality

• Warning style with icon, title, and subtitle.

• Dual actions: primary (Show me) and secondary (Ignore) with custom callbacks.

• Auto-dismiss with visible progress indicator; configurable duration.

• Manual dismiss (close icon) and optional persistent mode.

• Stackable toasts with queueing; fade/slide animations.

• Theming: colors, typography, radius, elevation, spacing.

Use cases

• Notify users about recoverable issues (validation gaps, partial syncs, missing fields).

• Prompt quick remediation (open error detail, navigate to failed step).

• Gentle system warnings (quota nearly full, unstable connection, deprecated setting).

• Inline guidance in onboarding, forms, checkout, dashboards.

• Cross-platform status messaging for iOS, Android, and web apps.

Keywords

warning toast, warning notification, snackbar, alert banner, actionable alert, dismissible toast, auto dismiss, progress bar, retry prompt, show details, inline actions, UI feedback, status message, non-blocking alert, Flutter widget, FlutterFlow component, mobile UI, web UI, material toast, user notification, app notification, UX messaging, caution icon, yellow alert.