Skip to content
Sign in
An image of the Stripe logo
/
Create account
Sign in
Home
Payments
Finance automation
Banking as a service
Developer tools
No-code
All products
Home
Payments
Finance automation
Home
Payments
Finance automation
Banking as a service
Developer tools
Overview
Building your integration
Developer tools
SDKs
API
Security
Sample projects
Videos
Stripe Apps
    Overview
    Get started
    Create an app
    How Stripe Apps work
    Sample apps
    Development
    Store secrets
    API authentication methods
    Authorization flows
    Server-side logic
    App settings page
    Build a UI
    Onboarding
    UI design
    Design your app
    Style your app
    Design patterns
    Components
      Accordion
      Badge
      Banner
      BarChart
      Box
      Button
      ButtonGroup
      Checkbox
      Chip
      ContextView
      DateField
      Divider
      FocusView
      FormFieldGroup
      Icon
      Img
      Inline
      LineChart
      Link
      List
      Menu
      Radio
      Select
      SettingsView
      SignInView
      Sparkline
      Spinner
      Switch
      Table
      Tabs
      TextArea
      TextField
      Toast
      Tooltip
    Share and distribute
    Distribution options
    Upload your app
    Versions and releases
    Test your app
    Publish your app
    Promote your app
    Add deep links
    Using install links
    Using roles in UI Extensions
    Post-install actions
    App analytics
    Reference
    App manifest
    CLI
    Extension SDK
    Permissions
    Viewports
    Extensions
    Migrate to Stripe Apps
    Building extensions
    Plugins and connectors
    Plugin authentication
Stripe Connectors
Partners
HomeDeveloper toolsComponents

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> } />

See also

  • Design patterns to follow
  • Style your app
  • UI testing
Was this page helpful?
Need help? Contact Support.
Watch our developer tutorials.
Check out our product changelog.
Questions? Contact Sales.
Powered by Markdoc
You can unsubscribe at any time. Read our privacy policy.
On this page
Overview
See also
Stripe Shell
Test mode
Welcome to the Stripe Shell! Stripe Shell is a browser-based shell with the Stripe CLI pre-installed. Log in to your Stripe account and press Control + Backtick (`) on your keyboard to start managing your Stripe resources in test mode. - View supported Stripe commands: - Find webhook events: - Listen for webhook events: - Call Stripe APIs: stripe [api resource] [operation] (e.g., )
The Stripe Shell is best experienced on desktop.
$