Skip to documentation
BoobstrapDocs
Components

Banners

Place full-width contextual notices at the top of a page with optional icons, actions, and dismiss behavior.

Components guideCopy-ready referencev0.7.0 current
Components

Banners

Banners span their containing page and keep an icon, message, optional action, and dismiss control aligned in a responsive inner layout.

Contextual variants

PrimaryHighlight an important product announcement.
InformationScheduled maintenance begins at 02:00 UTC.
SuccessThe new release is available in every region.
WarningThis environment contains unreleased changes.
HTML · Complete contextual banner
<div class="bs-banner bs-banner-info" role="status">
  <div class="bs-banner-inner">
    <i data-lucide="info" class="bs-banner-icon bs-icon" aria-hidden="true"></i>
    <div class="bs-banner-content">
      <strong class="bs-banner-title">Scheduled maintenance</strong>
      <span class="bs-banner-message">
        Maintenance begins at 02:00 UTC and should take 15 minutes.
      </span>
    </div>
    <a class="bs-banner-action" href="/status">View status</a>
  </div>
</div>

Dismissible banner

Development previewYou are viewing unreleased changes.
Visit live site
HTML · Complete dismissible banner
<div
  class="bs-banner bs-banner-warning"
  role="status"
  data-bs-banner
>
  <div class="bs-banner-inner">
    <i data-lucide="triangle-alert" class="bs-banner-icon bs-icon" aria-hidden="true"></i>
    <div class="bs-banner-content">
      <strong class="bs-banner-title">Development preview</strong>
      <span class="bs-banner-message">You are viewing unreleased changes.</span>
    </div>
    <a class="bs-banner-action" href="https://example.com/">Visit live site</a>
    <button
      class="bs-banner-dismiss"
      type="button"
      data-bs-banner-dismiss
      aria-label="Dismiss development preview banner"
    >
      <i data-lucide="x" class="bs-icon bs-icon-sm" aria-hidden="true"></i>
    </button>
  </div>
</div>
JavaScript · Initialize banners
import "@boobstrap/boobstrap";
import { initBanners } from "@boobstrap/boobstrap/js/banner";

const banners = initBanners(document);

// A banner can be restored later through its controller.
banners[0].show();

Placement

Place the banner outside the page container for a viewport-wide background. .bs-banner-inner constrains and aligns its contents.

Semantics

Use role="status" for non-urgent information. Reserve role="alert" for urgent content that should be announced immediately.

Dismissal

Dismissal is optional. Add data-bs-banner and a named data-bs-banner-dismiss button only when hiding the message is safe.

Banner API

Class or hookPurpose
.bs-bannerFull-width contextual background and boundary.
.bs-banner-innerResponsive icon, content, action, and dismissal layout.
.bs-banner-{primary|info|success|warning|danger}Contextual accent, background, and focus colors.
.bs-banner-iconDecorative or contextual icon slot.
.bs-banner-content, .bs-banner-title, .bs-banner-messageFlexible message content.
.bs-banner-actionOptional destination or recovery action.
data-bs-banner, data-bs-banner-dismissOptional dismiss/show controller and trigger.