Skip to main content

Banner
component

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.

string
required

The title text displayed on the banner.

required

The variant type of the banner.

boolean
required

The visibility state of the banner.

string
Default: 'Dismiss'

The text for the action button.

boolean
Default: true

Whether to hide the action button.

() => void
Default: Callback which dismisses the banner

The callback function executed when the banner is pressed.

Was this section helpful?

Banner

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 />,
);

Preview

Anchor to guidelinesGuidelines

  • 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.
Was this section helpful?