Flash

FlashComponent (variant: success/danger/warning/info, dismissible: bool). A page-top acknowledgment banner — not a per-field error (see Form Field) and not a persistent inline callout (that's a bare .panel--*, e.g. the chargeback notice in flows/order-refund/order-detail.html). Flash specifically answers "did my last action work," landing at the top of the page the user is redirected to.

Success

The reference case this component exists for: the landing state after a consequential action's confirm-dialog redirects here. See it live in flows/sale-creation/sales-listing.html (after publish), flows/order-refund/index.html (after refund), and flows/payouts/index.html (after payout creation).

Published: Ultimate Productivity Software Bundle is now live on the storefront.

Danger (form-level submission failure)

For failures that aren't tied to one field — a network error, a server-side rejection — as opposed to .field.is-error, which is scoped to a single input.

Refund failed: Stripe declined the request (card issuer unavailable). No funds were moved — try again, or contact the customer for an alternate refund method.

Warning

A completed action with a caveat — distinct from Status Badge's inline badge--warning, which marks a record's state rather than acknowledging something the current user just did.

Payout created with a waived fee: $4,716.25 scheduled for TechBargains. The processing fee was waived per the reason you provided.

Info

Neutral acknowledgment with no success/failure valence — a background job was queued, a change will take effect later, etc.

Export queued: Your CSV export is being generated and will email to jordan.diaz@stackcommerce.com when ready.

Usage guidance

Flash is static in every mockup in this system; in the real app it renders conditionally from a flash/notice and is dismissible via the same .modal__close button markup used in Modal. Exactly one Flash at the top of the page at a time — if two actions could both produce one in the same request/redirect, combine the copy into a single message rather than stacking banners. Use the variant that matches the outcome, not the record's own state: refunding a "Failed" order still gets a success Flash if the refund itself succeeded.

Flash settles in with a brief slide + fade on arrival (flash-settle, 320ms, --ease-decelerate) — a quiet acknowledgment that something just happened, not a page-load flourish. It fires once on mount, never on hover or repeat, and is skipped entirely under prefers-reduced-motion.