Sticky Promo Banner

Props

• label: string (required) -- aria-label for the aside region
• open: boolean (default: true) -- whether the banner is visible
• position: "top" | "bottom" (default: "bottom") -- sticky edge
• dismissLabel: string (required) -- aria-label for the dismiss button
• onDismiss / ondismiss: callback (optional) -- dismiss click handler
• children: slot -- banner content
• ...restProps: any additional HTML attributes

Keyboard Interactions

• Tab: Move focus into the banner content and the dismiss button
• Enter / Space on the dismiss button: Dismiss the banner (calls handler)
• Escape: Not handled by default — consumers may add an Escape handler if appropriate

ARIA

• <aside role="complementary" aria-label={label}> for the landmark name
• data-position reflects "top" | "bottom"
• Dismiss button: <button type="button" aria-label={dismissLabel}>
• The root element uses the native hidden attribute when open is false

When to Use

• Use for promotional announcements, beta invites, feature launches, and other time-bound messages.
• Use when the message is supplementary and dismissable (not safety-critical).
• Use at the top of the viewport for high-visibility announcements; at the bottom for less intrusive promos.

When Not to Use

• Do not use for safety-critical or blocking messages — use AlertDialog or Banner instead.
• Do not use for cookie consent unless your design explicitly treats consent as a promo (most regulators expect a more prominent surface).
• Do not use for navigation; use Header or NavigationMenu.

Headless

Renders an <aside> with the complementary landmark, an inline-styled fixed position, optional dismiss button, and any provided children. The fixed-position inline styles are the only styling the component applies; visual treatment, padding, animation, and z-index are the consumer's responsibility.

Styles

Consumer CSS targets the sticky-promo-banner class. Use the data-position="top" and data-position="bottom" attribute selectors to adjust appearance per edge. Style the inner sticky-promo-banner-content and sticky-promo-banner-dismiss classes for layout and the dismiss icon.

Testing

• Verify the component renders an <aside> element with class sticky-promo-banner and role="complementary"
• Verify aria-label is present and equals the label prop
• Verify data-position reflects the position prop (default "bottom")
• Verify inline style includes position: fixed; left: 0; right: 0; plus top: 0 (top) or bottom: 0 (bottom)
• Verify the hidden attribute is applied when open is false
• Verify the dismiss <button> renders only when onDismiss/ondismiss is provided
• Verify the dismiss button has type="button" and aria-label equal to the dismissLabel prop
• Verify the dismiss handler fires on click and on Enter/Space

Advice

• Designers: Keep the message short — one sentence with one link. Reserve top placement for higher-impact announcements; default to bottom for promos.
• Developers: Always supply label and dismissLabel. Persist the user's dismissal in storage so the banner does not reappear on every page load.

Implementation Notes

• Uses an <aside> element with role="complementary" and aria-label
• label is required — the aria-label that names the landmark
• dismissLabel is required — the aria-label for the dismiss button
• open defaults to true; when false, the root element renders with the hidden attribute
• position is exposed as data-position ("top" | "bottom", default "bottom") and applied via inline style
• Inline style="position: fixed; left: 0; right: 0; top: 0;" (top variant) or style="position: fixed; left: 0; right: 0; bottom: 0;" (bottom variant) — this is the only documented inline style in the design system besides what each framework needs
• The dismiss button renders only when onDismiss/ondismiss is provided
• All visible text comes from children for i18n flexibility

Related components

• announcement-banner — a banner highlighting important messages for all users
• banner — a prominent message bar across the top of a page
• banner-box — a banner box that is inside a banner component, using flexbox horizontal
• government-banner — a banner identifying a website as belonging to a government, with an expandable details panel
• medical-banner — a prominent message bar across the top of a page, with medical information
• medical-banner-box — a medical banner box that is inside a medical-banner component, using flexbox horizontal, with medical information

References

• WAI-ARIA complementary role: https://www.w3.org/TR/wai-aria-1.2/#complementary
• MDN <aside>: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/aside
• MDN position: fixed: https://developer.mozilla.org/en-US/docs/Web/CSS/position#fixed_positioning
• Mozilla Protocol Design System: https://protocol.mozilla.org/