Choose a version:

Announcement

The announcement component surfaces short, high-visibility messages without blocking the customer experience. Use announcement for promotions, loyalty updates, and lightweight prompts that keep customers engaged.

Announcements support links, optional dismissal, and can contain a modal for longer-form content. For persistent status messages or error alerts, use banner instead.

The announcement bar enforces a strict maximum height. Content beyond that height is truncated and can't scroll. Layout and content are controlled entirely through child elements.

Support

Targets (24)

Supported targets

Anchor to EventsEvents

The announcement component provides event callbacks for handling user interactions. Learn more about handling events.

Anchor to aftertoggle aftertoggle <typeof tagName, >: A callback that fires when the element state changes, after any toggle animations have finished.

If the element transitioned from hidden to showing, the oldState property will be set to closed and the newState property will be set to open.

If the element transitioned from showing to hidden, the oldState property will be set to open and the newState will be closed.

Learn more about newState property and oldState property.
Anchor to dismiss dismiss <typeof tagName>: A callback that fires when the announcement is dismissed by the user clicking the close button or by calling the dismiss() method programmatically.
Anchor to toggle toggle <typeof tagName, >: A callback that fires immediately when the element state changes, before any animations.

If the element is transitioning from hidden to showing, the oldState property will be set to closed and the newState property will be set to open.

If the element is transitioning from showing to hidden, then the oldState property will be set to open and the newState will be closed.

Learn more about the toggle event, newState property, and oldState property.

CallbackEventListener

A typed event listener for custom element events. The listener receives a `CallbackEvent` with the correct `currentTarget` type for the associated custom element tag.

(EventListener & {
      (event: CallbackEvent<TTagName, TEvent>): void;
    }) | null

CallbackEvent

An event type that narrows the `currentTarget` to the specific HTML element associated with the custom element tag. This provides type-safe event handling in callback listeners.

TEvent & {
  currentTarget: HTMLElementTagNameMap[TTagName];
}

ToggleArgumentsEvent

The event data provided to toggle-related callbacks. Contains the previous and next visibility states of the element.

newState
The visibility state of the element after the toggle occurred.
```
ToggleState
```
oldState
The visibility state of the element before the toggle occurred.
```
ToggleState
```

ToggleState

The visibility state of a toggleable element. - `open`: The element is visible and showing its content. - `closed`: The element is hidden and its content is not visible.

'open' | 'closed'

Anchor to MethodsMethods

The announcement component exposes methods for programmatic control.

Anchor to dismiss dismiss () => void required: Programmatically dismisses the announcement. This triggers the dismiss event callback.

Anchor to ExamplesExamples

Anchor to Display a promotional announcementDisplay a promotional announcement

Display a promotional announcement with a survey link. This example shows an s-announcement with inline text and a link inviting customers to fill out a survey.

Display a promotional announcement

A promotional announcement banner with a plant emoji, survey text, and a dismiss button.

html

<s-announcement>

Enjoy a free plant on us! 🌿 We'd love to hear from you. <s-link href="/survey">Fill out the survey</s-link>

</s-announcement>

Anchor to Promote a members-only offerPromote a members-only offer

Display a personalized discount for signed-in customers. This example uses subdued text for the discount code so the main message stands out.

html

<s-announcement>

<s-stack direction="inline" gap="small-100" align-items="center">

<s-text>Exclusive for members:</s-text>

<s-text color="subdued">Use code RETURN15 for 15% off your next order.</s-text>

</s-stack>

</s-announcement>

Anchor to Collect post-order feedbackCollect post-order feedback

Use an announcement as a teaser that opens a modal for longer-form content. This example pairs a prompt with a link that triggers a feedback survey.

html

<s-announcement>

<s-stack direction="inline" gap="base">

<s-text>How was your recent order?</s-text>

<s-link commandFor="feedback-modal" command="--show">Share feedback</s-link>

</s-stack>

<s-modal id="feedback-modal" heading="Tell us about your experience">

<s-stack gap="base">

<s-text>We'd love to hear how your recent order went.</s-text>

<s-text-area rows="4" label="What went well? What could we improve?"></s-text-area>

</s-stack>

<s-button slot="primary-action">Submit feedback</s-button>

</s-modal>

</s-announcement>

Anchor to Best practicesBest practices

Keep copy short: Fit the message in a single short line whenever possible so customers see it at a glance without needing to expand.
Plan for truncation: The component has a strict maximum height. Content that exceeds the expanded state's height is clipped with no scrolling. Validate your copy length before shipping.
Link to a modal for longer content: If you need to display surveys, detailed offers, or other long-form content, use the announcement bar as a teaser that opens a modal rather than overfilling the bar.

Was this page helpful?