Feedback
Banner
A persistent situation that needs a decision — wide, inline, and never blocking.Anatomy
The public structure is divided into four responsibilities.
- 1
Section root
A labelled semantic section — never role=alert — carrying the surface and grid.
- 2
Optional icon
Decorative and opt-in: without severity there is nothing to infer a default icon from.
- 3
Content
Title and body wire the accessible name and description through stable ids.
- 4
Actions leaf
A private stateless wrapper that aligns consumer buttons across both layouts.
Interactive configuration
Switch variant and layout, then toggle dismissal and the leading icon.
Layout is CSS-driven
auto switches on a static threshold, so SSR output and hydration never disagree.
Order never changes
Grid areas move the actions row visually; DOM and keyboard order stay as authored.
States
States preserve accessibility and expected feedback.
Wide layout
Icon, content, actions and close share one row above the threshold.
Narrow layout
Actions take a trailing row while close stays on the content row.
Explicit dismissal
Close emits close and hides the banner; Escape never dismisses it.
Permanent content
Content already in SSR HTML renders without live-region announcements.
In context
A dismissible banner with two actions built from public kit primitives.