# Banner

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

```tsx
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>
  );
}

```

```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);
});

```

## BannerProps

### BannerProps

### title

value: `string`

Message to display inside the banner

### tone

value: `Tone`

Adjusts the color and icon of the banner

### dismissible

value: `boolean`

Whether or not the banner can be dismissed

### onDismiss

value: `() => void`

Function invoked when the banner is dismissed

### primaryAction

value: `RemoteFragment`

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

### secondaryAction

value: `RemoteFragment`

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

### id

value: `string`

A unique identifier for the element.