A compact, high-contrast notification banner for communicating problems without blocking the UI. It pairs a bold headline (“Uh oh, something went wrong”) with a short, human message so users instantly understand what happened. The left accent bar and status icon draw attention while keeping the design calm and readable. A close (×) affordance lets users dismiss the alert at any time, and optional auto-dismiss keeps flows fast. Colors, copy, and elevation are fully themeable to match light or dark modes. Ideal for network issues, validation errors, or recoverable warnings in modern mobile and web apps.

Functionality

• Prominent title + secondary message with semantic styling.

• Status visuals: accent bar, warning/info icon (themeable).

• Dismiss actions: close button and optional auto-timeout.

• Variants: warning, error, info (colors, icons, tone).

• Motion: slide/fade in/out, configurable duration and easing.

• Accessibility: screen-reader labels, high contrast, large tap target.

• Layout: responsive width, multi-line wrapping, RTL support.

Use cases

• Show API/network failures with a retry flow.

• Surface form validation issues after submit.

• Notify users about partial saves or missing permissions.

• Warn about unsaved changes, quota limits, or degraded service.

• Inline alerts in dashboards, checkout, or settings screens.

Keywords

warning banner, error notification, alert toast, inline alert, snackbar, dismissible notification, problem message, retry error, network error, form validation error, warning toast, info alert, UX feedback, app notification, Flutter widget, FlutterFlow component, mobile UI, web UI, dark mode, accessibility, high contrast.