Banner

One full-bleed line about the whole session, not the page: impersonation, an unreachable backend, a job still running. Alert is the in-page box; this is the strip under the top bar. Dismissible only if you pass onDismiss.

Playground

Full-bleed, one line, about the session rather than the page. It has no title and no second line on purpose, anything that needs those is an Alert on the page it concerns.

tone

message

withAction

dismissible

Working on hydrating your Second Brain. #455 in queue

Check status →

<Banner
  tone="brand"
  icon={BrainIcon}
  action={<BannerAction href="/brain/status">Check status</BannerAction>}
>
  Working on hydrating your Second Brain.
</Banner>