Choose a version:

Banner

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

Anchor to bannerpropsBannerProps

Anchor to dismissible dismissible boolean: Whether or not the banner can be dismissed
Anchor to id id string: A unique identifier for the element.
Anchor to onDismiss onDismiss () => void: Function invoked when the banner is dismissed
Anchor to primaryAction primaryAction RemoteFragment: Sets the Primary action button of the container. This component must be a button component.
Anchor to secondaryAction secondaryAction RemoteFragment: Sets the Secondary action button of the container. This component must be a button component.
Anchor to title title string: Message to display inside the banner
Anchor to tone tone: Adjusts the color and icon of the banner

BannerProps

dismissible
Whether or not the banner can be dismissed
```
boolean
```
id
A unique identifier for the element.
```
string
```
onDismiss
Function invoked when the banner is dismissed
```
() => void
```
primaryAction
Sets the Primary action button of the container. This component must be a button component.
```
RemoteFragment
```
secondaryAction
Sets the Secondary action button of the container. This component must be a button component.
```
RemoteFragment
```
title
Message to display inside the banner
```
string
```
tone
Adjusts the color and icon of the banner
```
Tone
```

export interface BannerProps extends GlobalProps {
  /**
   * Message to display inside the banner
   */
  title?: string;
  /**
   * Adjusts the color and icon of the banner
   */
  tone?: Tone;
  /**
   * Whether or not the banner can be dismissed
   */
  dismissible?: boolean;
  /**
   * Function invoked when the banner is dismissed
   */
  onDismiss?: () => void;

  /**
   * Sets the Primary action button of the container. This component must be a button component.
   */
  primaryAction?: RemoteFragment;

  /**
   * Sets the Secondary action button of the container. This component must be a button component.
   */
  secondaryAction?: RemoteFragment;
}

Tone

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

Was this section helpful?

Simple Banner example

import React from 'react';

import {

render,

Banner,

Paragraph,

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

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

function App() {

return (

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

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

</Banner>

);

}

examples

Simple Banner example

React

import React from 'react';
import {
  render,
  Banner,
  Paragraph,
} from '@shopify/ui-extensions-react/admin';

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

function App() {
  return (
    <Banner title="Shipping rates changed" dismissible onDismiss={() => console.log('dismissed banner')}>
      <Paragraph>Your store may be affected</Paragraph>
    </Banner>
  );
}

JS

import {extend, Banner} from '@shopify/ui-extensions/admin';

extend('Playground', (root) => {
  const banner = root.createComponent(Banner, {
    title: 'Shipping rates changed',
    dismissible: true,
    onDismiss: () => console.log('dismissed banner')
  }, 'Your store may be affected');

  root.appendChild(banner);
});

Banner

Anchor to bannerpropsBannerProps

BannerProps

Tone

examples

Simple Banner example

React

JS

Preview