Alert & Banner
Alert — inline, assertive (role="alert") field/form status:
border + coloured text, optional faint filled tint, optional icon (either side). Banner — page-level, quieter (role="status"): always
solid-filled, full-width, leading icon + optional close (X). Both take Size | Responsive<Size>.
Alert — variants
neutral alert
primary alert
secondary alert
success alert
info alert
warning alert
danger alert
ghost alert
Sizes · filled · icon side
size = sm
size = md
size = lg
filled — a faint tinted background
icon on the right (iconPosition)
Banner — variants
neutral banner
primary banner
secondary banner
success banner
info banner
warning banner
danger banner
ghost banner
Dismissible · sizes · responsive
dismissible · size = sm
dismissible · size = md
dismissible · size = lg
Responsive: lg on phones, sm at ≥480px — resize the window.