# Banner Use banners to communicate important messages to customers in a prominent way. ```tsx import { reactExtension, Banner, } from '@shopify/ui-extensions-react/checkout'; export default reactExtension( 'purchase.checkout.block.render', () => , ); function Extension() { return ( ); } ``` ```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 ### collapsible value: `boolean` Makes the content collapsible. A collapsible banner will conceal child elements initially, but allow the user to expand the banner to see them. ### id value: `string` A unique identifier for the component. ### onDismiss value: `() => void` 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. ### status value: `Status` Sets the status of the banner. ### title value: `string` 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.