v2.2CTA

Sticky Bar CTA

Persistent bar at the viewport bottom or top with a message and action. Includes dismiss persistence via localStorage. Composes PrimaryButtonCTA.

Read the pattern View source on GitHub

Live preview

Rendered with real component code. Each example demonstrates a documented variant.

Solid variant

This component is normally viewport-anchored with position: fixed. The preview container uses position: relative and overflow: hidden to contain it within this box.

Minimal variant

This component is normally viewport-anchored with position: fixed. The preview container uses position: relative and overflow: hidden to contain it within this box.

React props

Configure the component via props in React or via attributes in HTML.

Prop	Type	Default	Description
message	string	required	Main copy shown inside the bar.
cta	{ label: string; href: string }	required	Label and destination for the action button.
variant	"solid" \| "minimal"	"solid"	Solid fills with the accent color. Minimal uses a transparent background with an accent border.
position	"bottom" \| "top"	"bottom"	Viewport edge the bar is pinned to.
dismissible	boolean	true	When true, a close button is rendered.
dismissKey	string	"sticky-bar-dismissed"	localStorage key used to persist the dismissed state across page loads.
className	string	undefined	Extra class appended to the root element.

HTML usage

The HTML variant uses the same shared styles and class names. Drop into any stack.

<link rel="stylesheet" href="path/to/primary-button-cta/styles.css">
<link rel="stylesheet" href="path/to/sticky-bar-cta/styles.css">

<!-- Solid variant, bottom position -->
<div
  class="sbc sbc--bottom sbc--solid"
  role="complementary"
  aria-label="Site banner"
  data-dismiss-key="sticky-bar-dismissed"
>
  <p class="sbc__message">
    Clarivex is now generally available. Invite your whole team today.
  </p>
  <div class="sbc__action">
    <a class="pbc pbc--solid pbc--rounded" href="/signup">Get started free</a>
  </div>
  <button class="sbc__close" type="button" aria-label="Dismiss">
    <svg viewBox="0 0 16 16" aria-hidden="true" width="16" height="16">
      <path d="M4 4l8 8M12 4l-8 8" stroke="currentColor" stroke-width="1.5" fill="none"/>
    </svg>
  </button>
</div>

<!-- Minimal variant, top position -->
<div
  class="sbc sbc--top sbc--minimal"
  role="complementary"
  aria-label="Site banner"
  data-dismiss-key="promo-bar-dismissed"
>
  <p class="sbc__message">Limited spots remaining in the early-access program.</p>
  <div class="sbc__action">
    <a class="pbc pbc--solid pbc--rounded" href="/apply">Reserve your spot</a>
  </div>
  <button class="sbc__close" type="button" aria-label="Dismiss">
    <svg viewBox="0 0 16 16" aria-hidden="true" width="16" height="16">
      <path d="M4 4l8 8M12 4l-8 8" stroke="currentColor" stroke-width="1.5" fill="none"/>
    </svg>
  </button>
</div>

Customization

Override these CSS custom properties to integrate the component into your brand.

.sbc {
  --sbc-bg: var(--brand-accent, #1e5fcf);
  --sbc-text-color: #ffffff;
  --sbc-border-color: var(--brand-accent, #1e5fcf);
  --sbc-padding: 0.75rem 1.25rem;
  --sbc-shadow: 0 -2px 12px rgba(0, 0, 0, 0.12);
  --sbc-z-index: 1000;
  --sbc-close-size: 2rem;
  --sbc-close-color: currentColor;
  --sbc-close-opacity: 0.7;
  --sbc-close-opacity-hover: 1;
  --sbc-gap: 1rem;
}