ds
Components
Banner and alert

Banner and alert

Page-wide notices and inline alerts with actions.

Banner

Show code

<div class="banner" role="region" aria-label="Announcement">
  <svg class="i" viewBox="0 0 24 24" aria-hidden="true"><path d="M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594z"/><path d="M20 2v4"/><path d="M22 4h-4"/><circle cx="4" cy="20" r="2"/></svg><p>Column-level lineage is in beta for Postgres and Snowflake sources. <a href="#">Read the notes</a></p>
  <button class="btn icon xs ghost" aria-label="Dismiss"><svg class="i" viewBox="0 0 24 24" aria-hidden="true"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg></button>
</div>
<div class="banner warn" role="region" aria-label="Maintenance">
  <svg class="i" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg><p>Scheduled maintenance on eu-west-1, Sat 18 Oct 02:00 to 03:00 UTC. Runs will queue and resume.</p>
  <time>in 6 days</time>
</div>
<div class="banner down" role="alert">
  <svg class="i" viewBox="0 0 24 24" aria-hidden="true"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"/><path d="M12 9v4"/><path d="M12 17h.01"/></svg><p><strong>Ingestion is delayed in ap-south-1.</strong> New events are buffered, nothing is lost.</p>
  <a class="btn xs" href="#">Status page</a>
</div>
<div class="banner plain center">
  <p>You are viewing <b>acme-prod</b> as read-only. <a href="#">Request access</a></p>
</div>

A banner spans the top of the page or app, above the header, and says something about the whole product: an outage, maintenance, a trial ending, read-only mode. One at a time. The tint is 9% of the state colour on the page background, with a hairline under it, so it reads as part of the chrome rather than a popup.

Notice

This pipeline has not succeeded in 3 days

The last 12 runs failed at load_orders with a permission error on s3://acme-raw/orders/.

View last run

Backfills use the same workers as scheduled runs

A large backfill can delay the next scheduled run by up to its longest task.

Could not reach orders-db.internal:5432. Check the host and that the IP allowlist includes 10.40.0.0/16.

Connection works. 14 tables found.

Code

<div class="notice warn" role="status">
  <svg class="i" viewBox="0 0 24 24" aria-hidden="true"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"/><path d="M12 9v4"/><path d="M12 17h.01"/></svg>
  <strong>This pipeline has not succeeded in 3 days</strong>
  <p>The last 12 runs failed at <code>load_orders</code> with a permission error on <code>s3://acme-raw/orders/</code>.</p>
  <div class="btn-row"><a class="btn sm" href="#">View last run</a><button class="btn sm ghost">Pause schedule</button></div>
</div>
<div class="notice">
  <svg class="i" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>
  <strong>Backfills use the same workers as scheduled runs</strong>
  <p>A large backfill can delay the next scheduled run by up to its longest task.</p>
  <button class="btn icon xs ghost close" aria-label="Dismiss"><svg class="i" viewBox="0 0 24 24" aria-hidden="true"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg></button>
</div>
<div class="notice down sm" role="alert"><svg class="i" viewBox="0 0 24 24" aria-hidden="true"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"/><path d="M12 9v4"/><path d="M12 17h.01"/></svg><p>Could not reach <code>orders-db.internal:5432</code>. Check the host and that the IP allowlist includes 10.40.0.0/16.</p></div>
<div class="notice ok sm"><svg class="i" viewBox="0 0 24 24" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg><p>Connection works. 14 tables found.</p></div>

A notice sits inside the page, next to what it is about: a title that says what happened, a line that says why, and what to do. Use .sm for one-liners under a form. It differs from the callout, which is an aside in prose; a notice is about the state of the thing on screen.

API

Class	On	What it does
`.banner`	div	Full width, gutter padding, a hairline under it. Icon, <p>, then actions.
`.warn / .down / .ok / .plain`	.banner, .notice	The state. Accent by default; plain is grey.
`.center`	.banner	Centres the text, for short announcements.
`.boxed`	.banner	Rounded and bordered, for use inside a page.
`.notice`	div	Icon, <strong> title, <p>, .btn-row. A .close button goes top right.
`.sm`	.notice	Compact, for a single line.

Say what happened and what to do, in that order.
Let people dismiss announcements, and remember it.
Link to the status page during an incident.

Don't

Stacking banners. Show the most important one.
Banners for form errors. Put them next to the field.
Making outages dismissable for good.

Accessibility

Use role="alert" only for something urgent that appears while the page is open. Use role="status" for the rest, or nothing for content that is there on load.
Icon-only dismiss buttons need an aria-label.
Colour is never the message: the text says it is down, maintenance or read-only.