Banner

Use the Banner to show a variety of alerts or messages you want to make explicit to the user.

To add the Banner component to your app:

import {Banner} from '@stripe/ui-extension-sdk/ui';

Overview

Banners take up the width of their parent container. Banners are suitable for important information requiring user input and persistent display.

Banners come with three preset types:

Default
Caution
Critical

The following shows a preview of the three preset types for a banner:

<Banner
  type="default"
  onDismiss={() => console.log('hello world')}
  title="Neutral title"
  description="A short description"
  actions={
    <Button onPress={() => console.log('hello world')}>Button</Button>
  }
/>
<Banner
  type="caution"
  title="Check your bank details"
  description="Your bank account information must be verified before receiving payouts."
  onDismiss={() => console.log('hello world')}
  actions={
    <>
      <Button onPress={() => console.log('hello world')}>Update bank account</Button>
      <Button onPress={() => console.log('hello world')}>
        Learn more
      </Button>
    </>
  }
/>
<Banner
  type="critical"
  title="Check your bank details"
  description="Your bank account information must be verified before receiving payouts."
  actions={
    <Button onPress={() => console.log('hello world')}>Update bank account</Button>
  }
/>

Props

Prop	Type
actions	`ReactNode`
description	`ReactNode`
onDismiss	`(() => void)`
title	`ReactNode`
type	`"default" \| "caution" \| "critical"`

onDismiss

Banners have the option of adding a dismiss button—add a click handler to onDismiss for the Hide Banner button to appear:

const [open, setOpen] = React.useState(true);
return (
  <Button onPress={() => setOpen(!open)}>
    {open ? 'Hide' : 'Show'} Banner
  </Button>
  {open && (
    <Banner
      type="default"
      onDismiss={() => setOpen(false)}
      title="Neutral title"
      description="A short description"
      actions={
        <Button onPress={() => console.log('hello world')}>Button</Button>
      }
    />
  )}
);

Actions

Banners also take an actions prop that allows you to add action buttons to the Banner:

<Banner
  type="default"
  title="Check your bank details"
  description="Your bank account information must be verified before receiving payouts."
  actions={
    <Button onPress={() => console.log('hello world')}>
      Update bank account
    </Button>
  }
/>

Banner

Overview

Props

onDismiss

Actions

See also