FluxBanner

An inline notification row for surface-level messages. Pick tone by urgency: info/success render with role=status (polite); warning/danger render with role=alert (assertive). Attach an optional action button for recovery flows and a dismiss button for transient messages.

Extends: Row (a2ui/basic@0.10)

Category: compound

Props

Name

Type

Required

Default

accessibility

object

no

``

action

string

no

``

component

'FluxBanner'

yes

``

dismiss

string

no

``

icon

string

no

``

id

string

yes

``

message

string

yes

``

title

string

yes

``

tone

'info' | 'success' | 'warning' | 'danger'

yes

'info'

Examples

Informational banner.

UI.banner("Heads up", "We're updating the pricing page at 5pm UTC.", tone="info")

Danger banner with retry + dismiss controls.

UI.banner("Payment failed", "Your card was declined.", tone="danger", action=retry_btn, dismiss=close_btn)

Anti-patterns

Avoid: Stacking more than three banners on one surface drowns the signal. Use a list + counters instead.

UI.column([UI.banner(...), UI.banner(...), UI.banner(...), UI.banner(...)])

Avoid: tone=danger signals an error. Use tone=success for confirmations.

UI.banner("Saved!", "Your changes were saved.", tone="danger")

Tokens used

  • $color.danger.solid

  • $color.danger.subtle

  • $color.info.11

  • $color.info.3

  • $color.success.solid

  • $color.success.subtle

  • $color.warning.3

  • $color.warning.9

  • $radius.md

  • $shadow.sm

  • $space.2

  • $space.3

  • $space.4

Basic-catalog fallback

  • Component: Row

  • Prop map: message → child, title → child

  • Notes: Basic renderers drop tone + role + icon slot; the row stays but reads as plain text with no urgency affordance.