Banner — RenDS Components

About

Overview

A Banner sits above (or inside) a content region and announces something the user should know before continuing. Use them for app-wide notices ("Scheduled maintenance Saturday"), success feedback after a critical action, or contextual warnings inside a form.

Banner vs Toast vs Dialog. Banner is persistent and contextual. Toast is transient. Dialog blocks. Pick based on how important the message is and whether the user has to act on it.

Live

Demo

<div class="ren-banner ren-banner-info" role="status">
  <span class="ren-banner-icon" aria-hidden="true">ℹ</span>
  <div class="ren-banner-content">
    <p class="ren-banner-title">Scheduled maintenance</p>
    <p class="ren-banner-message">The service will be briefly unavailable…</p>
  </div>
  <button class="ren-banner-dismiss" aria-label="Dismiss">×</button>
</div>

Status

Variants

Status

With action

Compact

Full-bleed

Reference

API

CSS classes

Class	Effect
`.ren-banner`	Base. Flex row with icon · content · actions · dismiss.
`.ren-banner-success` / `-warning` / `-danger` / `-info` / `-neutral`	Status variants. Tints icon, accent border, and subtle background.
`.ren-banner-icon`	Leading icon slot. Use a real SVG or a unicode glyph; mark `aria-hidden`.
`.ren-banner-content`	Title + optional message. The message reflows under the title when present.
`.ren-banner-title`	Bold one-liner.
`.ren-banner-message`	Secondary line. Optional.
`.ren-banner-actions`	Trailing slot for one or two buttons. Right-aligned.
`.ren-banner-dismiss`	The × close button. Always pair with `aria-label`.
`.ren-banner-compact`	Tighter padding, smaller icon. For inline contexts.
`.ren-banner-full`	Full-bleed, no border-radius. For app-wide bars at the top of the layout.

Inclusive by default

Accessibility

Use role="status" for non-critical banners (info / success / neutral / warning) — screen readers announce when idle.
Use role="alert" for danger banners — they interrupt the current announcement.
Don't rely on color alone — the icon and the title text should make the status clear without color.
Dismiss button: always include aria-label="Dismiss" (or more specific). Don't make dismissal the only way to act on a critical message.

Don't auto-dismiss banners. Unlike Toast, banners are persistent — the user reads them in their own time. Auto-hiding defeats the purpose.

Patterns

Examples

App-wide notice at top of page

<div class="ren-banner ren-banner-warning ren-banner-full" role="status">
  <span class="ren-banner-icon"><!-- alert SVG --></span>
  <div class="ren-banner-content">
    <p class="ren-banner-title">Read-only mode — database migration in progress</p>
  </div>
</div>

Empty-state hint inside a card

<div class="ren-banner ren-banner-info ren-banner-compact" role="status">
  <span class="ren-banner-icon">ℹ</span>
  <div class="ren-banner-content">
    <p class="ren-banner-title">No invoices yet</p>
    <p class="ren-banner-message">Your first invoice will appear here once you onboard a client.</p>
  </div>
  <div class="ren-banner-actions">
    <button class="ren-btn ren-btn-primary ren-btn-sm">Add client</button>
  </div>
</div>