---
title: CalloutBanner
description: >-
  CalloutBanner is used to inform buyers about the details of a limited time
  offer.
api_name: checkout-extensions
source_url:
  html: >-
    https://shopify.dev/docs/api/checkout-extensions/post-purchase/components/calloutbanner
  md: >-
    https://shopify.dev/docs/api/checkout-extensions/post-purchase/components/calloutbanner.md
---

ExpandOn this page

* [Props](https://shopify.dev/docs/api/checkout-extensions/post-purchase/components/calloutbanner.md#props)
* [Guidelines](https://shopify.dev/docs/api/checkout-extensions/post-purchase/components/calloutbanner.md#guidelines)

# CalloutBanner

CalloutBanner is used to inform buyers about the details of a limited time offer. They differ from Banner which is used to report status.

***

### Example

![calloutbanner](https://shopify.dev/assets/assets/images/api/checkout-extensions/post-purchase/components/calloutbanner-CglXHhvl.png)

```ts
import {extend, CalloutBanner, Text} from '@shopify/post-purchase-ui-extensions';


extend('Checkout::PostPurchase::Render', (root) => {
  const calloutBanner = root.createComponent(
    CalloutBanner,
    {title: 'Special offer today only'},
    [
      root.createComponent(
        Text,
        undefined,
        'Add the Dinghy Skeleton Cruiser to your order and save 15%',
      ),
    ],
  );


  root.appendChild(calloutBanner);
});
```

```tsx
import {render, CalloutBanner, Text} from '@shopify/post-purchase-ui-extensions-react';


render('Checkout::PostPurchase::Render', () => <App />);


function App() {
  return (
    <CalloutBanner title="Special offer today only">
      <Text>Add the Dinghy Skeleton Cruiser to your order and save 15%</Text>
    </CalloutBanner>
  );
}
```

##### JS

```
import {extend, CalloutBanner, Text} from '@shopify/post-purchase-ui-extensions';

extend('Checkout::PostPurchase::Render', (root) => {
  const calloutBanner = root.createComponent(
    CalloutBanner,
    {title: 'Special offer today only'},
    [
      root.createComponent(
        Text,
        undefined,
        'Add the Dinghy Skeleton Cruiser to your order and save 15%',
      ),
    ],
  );

  root.appendChild(calloutBanner);
});
```

##### React

```
import {render, CalloutBanner, Text} from '@shopify/post-purchase-ui-extensions-react';

render('Checkout::PostPurchase::Render', () => <App />);

function App() {
  return (
    <CalloutBanner title="Special offer today only">
      <Text>Add the Dinghy Skeleton Cruiser to your order and save 15%</Text>
    </CalloutBanner>
  );
}
```

***

## Props

optional = ?

| Name | Type | Description |
| - | - | - |
| title? | `string` | Callout banners have an optional title. Use a title to grab the buyers attention with a short, concise message. |
| border? | `"none" \| "block"` | Adds a top and bottom border to the callout banner @default 'block' |
| background? | `"secondary" \| "transparent"` | Sets the background color of the callout banner @default 'secondary' |
| alignment? | `"leading" \| "center" \| "trailing"` | Sets the alignment of the title and children @default 'center' |
| spacing? | `"xtight" \| "tight" \| "loose" \| "xloose"` | Sets the spacing between the title and children @default 'tight' |

***

## Guidelines

* Never display more than one CalloutBanner
* Place callout banners near the top of the page to bring the buyer's attention
* The text should be written as concisely as possible
* Be considerate and avoid anxiety provoking language:
* Avoid exclamation points – "Wait! Before time runs out!"
* Give it a feeling of personalization

***

* [Props](https://shopify.dev/docs/api/checkout-extensions/post-purchase/components/calloutbanner.md#props)
* [Guidelines](https://shopify.dev/docs/api/checkout-extensions/post-purchase/components/calloutbanner.md#guidelines)