# Banner
Use banners to communicate important messages to customers in a prominent way.
### Basic Banner

```tsx
import {
  reactExtension,
  Banner,
} from '@shopify/ui-extensions-react/checkout';

export default reactExtension(
  'purchase.checkout.block.render',
  () => <Extension />,
);

function Extension() {
  return (
    <Banner
      status="critical"
      title="Your payment details couldn’t be verified. Check your card details and try again."
    />
  );
}

```

```js
import {extension, Banner} from '@shopify/ui-extensions/checkout';

export default extension('purchase.checkout.block.render', (root) => {
  const banner = root.createComponent(Banner, {
    status: 'critical',
    title:
      'Your payment details couldn’t be verified. Check your card details and try again.',
  });

  root.appendChild(banner);
});

```


## BannerProps

### BannerProps

### title
Banners have an optional title. Use a title to grab the buyer’s attention
with a short, concise message. Banners with no title should have child elements
to convey the banner’s purpose to the buyer.
### status
Sets the status of the banner.
### collapsible
Makes the content collapsible. A collapsible banner will conceal child
elements initially, but allow the user to expand the banner to see them.
### onDismiss
Callback when banner is dismissed. This component is
[controlled](https://reactjs.org/docs/forms.html#controlled-components),
so you must manage the visibility of the banner in state by using
the onDismiss callback.
### id
A unique identifier for the component.
### Status

'info' | 'success' | 'warning' | 'critical'