---
title: Announcement
description: The Announcement component provides a less disruptive alternative to auto-open modals for capturing user attention. It provides a standardized way to engage users without being too intrusive.
api_version: 2025-10
api_name: checkout-ui-extensions
source_url:
  html: https://shopify.dev/docs/api/checkout-ui-extensions/latest/polaris-web-components/feedback/announcement
  md: https://shopify.dev/docs/api/checkout-ui-extensions/latest/polaris-web-components/feedback/announcement.md
---

# Announcement

The Announcement component provides a less disruptive alternative to auto-open modals for capturing user attention. It provides a standardized way to engage users without being too intrusive.

## Events

* aftertoggle

  ((event: CallbackEventListener\<typeof tagName>) => void) | null

  Callback fired when the element state changes **after** any 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`.

* dismiss

  ((event: CallbackEventListener\<typeof tagName>) => void) | null

  Callback fired when the announcement is dismissed by the user (either via the built-in dismiss button or programmatically).

* toggle

  ((event: CallbackEventListener\<typeof tagName>) => void) | null

  Callback straight after the element state changes.

  * 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 `oldState` property will be set to `open` and the `newState` will be `closed`.

### CallbackEventListener

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

### CallbackEvent

```ts
TEvent & {
    currentTarget: HTMLElementTagNameMap[TTagName];
}
```

## Methods

* dismiss

  () => void

  required

### Examples

* #### Code

  ##### Default

  ```html
  <s-announcement>
    <s-stack direction="inline" gap="base">
      <s-text>Check our latest offers</s-text>
      <s-link commandFor="modal" command="--show"> Fill out the survey </s-link>
    </s-stack>
    <s-modal id="modal" heading="Tell us about your shopping experience">
      <s-stack gap="base">
        <s-text>We'd love to hear about your shopping experience</s-text>
        <s-text-area
          rows="4"
          label="How can we make your shopping experience better?"
        ></s-text-area>
        <s-button>Submit</s-button>
      </s-stack>
    </s-modal>
  </s-announcement>
  ```

## Preview

![](https://shopify.dev/images/templated-apis-screenshots/checkout-ui-extensions/2025-10/announcement-default.png)

## Best Practices

* Prioritize the default state: The most effective use of the announcement bar is when content is short enough to display entirely in its default state, with no need for expansion. This provides the best user experience.
* Handle content truncation: The component has a strict maximum height. Content that exceeds the expanded state’s height will be cut off with no scrolling capability. Ensure your application’s logic handles excessively long content gracefully to prevent truncation.
* Provide a modal alternative: If your application needs to display more than a few lines of content, avoid cramming it into the announcement bar. Instead, use the bar as a teaser that links to a modal. This is the recommended pattern for displaying surveys, detailed offers, or other longer-form content.