Banner

Contract

Accessibility

Anatomy

The actions are pushed to the far edge and do not shrink, so a long text wraps and the button stays whole.

The icon is centred on the first line of the text: calc((1lh - var(--size-icon)) / 2). The formula adjusts to the type size and the density by itself, so a banner of one line and a banner of three look equally aligned.

Variants

<div class="inst-banner" data-tone="warn">
  <div class="inst-banner-body">
    <div class="inst-banner-title">Access expires in 3 days</div>
    <div class="inst-banner-text">After 8 August starting runs will stop.</div>
  </div>
  <div class="inst-banner-actions">
    <button class="inst-btn inst-btn--sm" type="button">Renew</button>
  </div>
</div>
<div class="inst-banner" data-tone="error">
  <div class="inst-banner-body">
    <div class="inst-banner-title">Storage maintenance</div>
    <div class="inst-banner-text">The artefacts are unavailable until 21:00.</div>
  </div>
</div>
<div class="inst-banner" data-tone="ok">
  <div class="inst-banner-body"><div class="inst-banner-title">The changes are saved</div></div>
</div>

The tone is the same data-tone as on the badge and everywhere else. It carries an icon. The glyph comes from a shared set of masks — one for the banner and the note.

With no data-tone the icon is not drawn at all (content: none), and the banner stays on a neutral muted surface.

JS

Include the module once per page — there is no need to initialise the components one by one, instrument.js works by delegation and sees nodes that arrived later.

<script type="module" src="instrument.js"></script>

What instrument.js does

Nothing. A banner has no cross: a banner reports the state of the system, and a state does not disappear from being closed. Closing makes sense only where the application knows what to do with something closed.

If closing is wanted after all

The button is an ordinary one and has to be added yourself. Along with it comes the decision of what "closed" means: until a reload, until the end of the session, or for good.

document.addEventListener('click', (e) => {
  const id = e.target.closest('[data-close]')?.dataset.close;
  if (!id) return;
  document.getElementById(id).hidden = true;
  sessionStorage.setItem('hidden:' + id, '1'); // until the session ends, not for good
});

hidden rather than removing the node: the banner will come back when the state repeats, and there is no point in recreating the markup.

API

Related

ModalNoteNotificationFailure blockApproval requestStatus bar