PromotionBar

Top-of-page promotional strip for short rotating messages, shipping notes, campaign callouts, or store-wide announcements, now with an additive composition-first control surface.

Best for

shipping noticescampaign calloutstop-level announcements

Import

import { PromotionBar } from "@enadhq/enad-react-sdk/client/storefront"

When to use it

Use PromotionBar when the page shell needs a lightweight announcement region. In the new composed layout model, the app decides explicitly where that strip belongs.

Common placements:

inside Header.Promotion
above a custom header shell
as a standalone strip on campaign pages

Preferred composition surface

Use child slots when the app wants to keep the built-in carousel logic but explicitly control the visible anatomy:

PromotionBar.Message
PromotionBar.Controls
PromotionBar.PrevButton
PromotionBar.NextButton
PromotionBar.DismissButton

The existing messages[] API remains the convenience path.

Behavior and theming guidance

The bar still uses bg-accent text-accent-foreground semantic colors by default, and classNames still exposes stable hooks for message, prevButton, nextButton, dismissButton, and icon.

Use the slot-first path when the storefront wants to:

change where the controls sit relative to the message
inject richer inline message markup
keep the same carousel/dismiss logic while treating the bar as a composable announcement primitive

Use the fast path when the default centered shell is already right.

Messages still cycle with a wraparound carousel: the last message wraps to the first and vice versa. Navigation and close buttons stay optional, and the labels prop can localize the button text used for accessibility.

Examples

Live examples you can edit directly in the sandbox.

2 examples

Composition-first promotion bar

Use the new child-slot surface when the app wants the built-in carousel/dismiss behavior but needs explicit control over message and controls placement.

Fast path still supported

Keep using `messages[]` directly when the default shell is already right and the app only needs class-based theming.

Slots

rootprevButtonnextButtoniconmessagedismissButton

Component Sets

Preview the first example across the available component-set presets to compare tone, spacing, and structural defaults.

Props

Prop	Type	Default	Description
enabled	boolean	—	No description yet.
messages	string	—	No description yet.
children	string	—	Composition-first promo content assembled from child slots such as `PromotionBar.Message`, `PromotionBar.Controls`, and the directional buttons
onDismiss	string	—	No description yet.
labels	string	—	No description yet.
classNames	Partial<Record<import("@enadhq/enad-react-sdk/client/storefront/types").PromotionBarSlot, string>>	—	No description yet. Slot keys rootprevButtonnextButtoniconmessagedismissButton
className	string	—	No description yet.