---
title: Banner
description: >-
  A banner informs merchants about important changes or persistent conditions.
  Use if you need to communicate to merchants in a prominent way, without
  blocking other actions.
api_version: 2024-04
api_name: pos-ui-extensions
source_url:
  html: 'https://shopify.dev/docs/api/pos-ui-extensions/2024-04/components/banner'
  md: 'https://shopify.dev/docs/api/pos-ui-extensions/2024-04/components/banner.md'
---

# Bannercomponent

A banner informs merchants about important changes or persistent conditions. Use if you need to communicate to merchants in a prominent way, without blocking other actions.

## Banner

* title

  string

  required

  The title text displayed on the banner.

* variant

  BannerVariant

  required

  The variant type of the banner.

* visible

  boolean

  required

  The visibility state of the banner.

* action

  string

  Default: 'Dismiss'

  The text for the action button.

* onPress

  () => void

  Default: Callback which dismisses the banner

  The callback function executed when the banner is pressed.

* hideAction

  boolean

  Default: true

  Whether to hide the action button.

### BannerVariant

```ts
'confirmation' | 'alert' | 'error' | 'information'
```

### Examples

* #### Banner

  ##### React

  ```tsx
  import React from 'react';
  import {
    Banner,
    ScrollView,
    Screen,
    reactExtension,
  } from '@shopify/ui-extensions-react/point-of-sale';

  const SmartGridModal = () => {
    return (
      <Screen title="Home" name="Home">
        <ScrollView>
          <Banner
            title="Information Banner"
            variant="information"
            action="Ok"
            visible
          />
          <Banner
            title="Confirmation Banner"
            variant="confirmation"
            visible
          />
          <Banner
            title="Alert Banner"
            variant="alert"
            visible
          />
          <Banner
            title="Error Banner"
            variant="error"
            visible
          />
        </ScrollView>
      </Screen>
    );
  };

  export default reactExtension(
    'pos.home.modal.render',
    () => <SmartGridModal />,
  );
  ```

  ##### TS

  ```ts
  import {
    Banner,
    ScrollView,
    Screen,
    extension,
  } from '@shopify/ui-extensions/point-of-sale';

  export default extension(
    'pos.home.modal.render',
    (root) => {
      const screen = root.createComponent(Screen, {
        title: 'Home',
        name: 'Home',
      });
      const scrollView =
        root.createComponent(ScrollView);

      scrollView.appendChild(
        root.createComponent(Banner, {
          title: 'Information Banner',
          variant: 'information',
          action: 'Ok',
          visible: true,
        }),
      );

      scrollView.appendChild(
        root.createComponent(Banner, {
          title: 'Confirmation Banner',
          variant: 'confirmation',
          visible: true,
        }),
      );

      scrollView.appendChild(
        root.createComponent(Banner, {
          title: 'Alert Banner',
          variant: 'alert',
          visible: true,
        }),
      );

      scrollView.appendChild(
        root.createComponent(Banner, {
          title: 'Error Banner',
          variant: 'error',
          visible: true,
        }),
      );

      screen.appendChild(scrollView);
      root.appendChild(screen);
    },
  );
  ```

## Preview

![](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2024-04/banner-default.png)

## Guidelines

* Use when needing to communicate to merchants in a way that is persistent but non-interruptive.
* Only one banner should be visible at a time.