Choose a version:

Banner

Use this component if you need to communicate to merchants in a prominent way.

Anchor to bannerpropsBannerProps

title

string

Message to display inside the banner

tone

Adjusts the color and icon of the banner

dismissible

boolean

Whether or not the banner can be dismissed

onDismiss

() => void

Function invoked when the banner is dismissed

primaryAction

RemoteFragment

Sets the Primary action button of the container. This component must be a button component.

secondaryAction

RemoteFragment

Sets the Secondary action button of the container. This component must be a button component.

string

A unique identifier for the element.

Was this section helpful?

import React from 'react';

import {

render,

Banner,

Text,

} from '@shopify/ui-extensions-react/admin';

render('Playground', () => <App />);

function App() {

return (

<Banner title="Shipping rates changed" dismissible onDismiss={() => console.log('dismissed banner')}>

<Text>Your store may be affected</Text>

</Banner>

);

}