Banner

Informs merchants about important changes or persistent conditions. Use this component if you need to communicate to merchants in a prominent way. Banners are placed at the top of the page or section they apply to, and below the page or section header.

Examples

  • Use to convey general information or actions that aren’t critical. For example, you might show a banner that asks for merchant feedback.
  • Default banners contain lower priority information and should always be dismissible.
Drag to resize example

Props

action
DisableableAction & LoadableAction
Action for banner
children
React.ReactNode
The child elements to render in the banner.
icon
SVGSource | "placeholder" | "add" | "alert" | "arrowDown" | "arrowLeft" | "arrowRight" | "arrowUp" | "arrowUpDown" | "calendar" | "cancel" | "cancelSmall" | "caretDown" | "caretUp" | "checkmark" | "chevronDown" | "chevronLeft" | "chevronRight" | "chevronUp" | "circleCancel" | "circleChevronDown" | "circleChevronLeft" | "circleChevronRight" | "circleChevronUp" | "circleInformation" | "circlePlus" | "circlePlusOutline" | "conversation" | "delete" | "disable" | "dispute" | "duplicate" | "embed" | "export" | "external" | "help" | "home" | "horizontalDots" | "import" | "logOut" | "notes" | "notification" | "onlineStore" | "orders" | "print" | "products" | "profile" | "refresh" | "risk" | "save" | "search" | "subtract" | "view"
Icon to display in the banner. Use only major, duotone icons
secondaryAction
Action
Action | Displays a secondary action
status
"success" | "info" | "warning" | "critical"
Sets the status of the banner.
title
string
Title content for the banner.
onDismiss
() => void
Callback when banner is dismissed

Default banners

  • Use to convey general information or actions that aren’t critical. For example, you might show a banner that asks for merchant feedback.
  • Default banners contain lower priority information and should always be dismissible.

Default banner for Android

Banner with footer call-to-action

Use when you want merchants to take an action after reading the banner.

Banner with footer call-to-action for Android

Informational banners

Use to update merchants about a change or give them advice.

Informational banner for Android

Success banner

  • Default to using toasts for success messages, unless the feedback is delayed, persistent, or has a call to action
  • Include next steps if applicable

Success banner for Android

Warning banners

  • Use to display information that needs attention or that merchants need to take action on
  • Seeing these banners can be stressful for merchants so be cautious about using them

Warning banner for Android

Critical banners

  • Use to communicate problems that have to be resolved immediately for merchants to complete a task
  • For example, you will show this banner for orders with high fraud risk
  • Seeing these banners can be stressful for merchants so be cautious about using them

Critical banner for Android

Default banners

  • Use to convey general information or actions that aren’t critical. For example, you might show a banner that asks for merchant feedback.
  • Default banners contain lower priority information and should always be dismissible.

Default banner for iOS

Banner with footer call-to-action

Use when you want merchants to take an action after reading the banner.

Banner with footer call-to-action for iOS

Informational banners

Use to update merchants about a change or give them advice.

Informational banner for iOS

Success banner

  • Default to using toasts for success messages, unless the feedback is delayed, persistent, or has a call to action
  • Include next steps if applicable

Success banner for iOS

Warning banners

  • Use to display information that needs attention or that merchants need to take action on
  • Seeing these banners can be stressful for merchants so be cautious about using them

Warning banner for iOS

Critical banners

  • Use to communicate problems that have to be resolved immediately for merchants to complete a task
  • For example, you will show this banner for orders with high fraud risk
  • Seeing these banners can be stressful for merchants so be cautious about using them

Critical banner for iOS

Best practices

Banners should:

  • Be placed in the appropriate context:
    • Banners relevant to an entire page should be placed at the top of that page, below the page header. They should occupy the full width of the content area.
    • Banners related to a section of a page (like a card, popover, or modal) should be placed inside that section, below any section heading.
    • Banners related to an element more specific that a section should be placed immediately above or below that element.
  • Focus on a single theme, piece of information, or required action to avoid overwhelming merchants.
  • Be dismissible unless they contain critical information or an important step merchants need to take.
  • Be concise and scannable—merchants shouldn’t need to spend a lot of time figuring out what they need to know and do.
  • Be limited to a few important calls to action with no more than one primary action.
  • Be used thoughtfully and sparingly for only the most important information.
  • Not be used as the primary entry point to information or actions merchants need on a regular basis.
  • Not be used for marketing information or upsell—use callout cards instead.
  • Use the default icon for success, info, warning and critical statuses. If the icon is changed, use only major, duotone icons.

Content guidelines

Headings

Banner headings should be:

  • Descriptive: help merchants understand what they’ll find in the card.
    • Communicate when a situation is serious enough to warrant using a critical or warning banner. People who are unable to see the color of the banner need to clearly understand the importance of the situation without the benefit of seeing the color of the banner. Learn more about accessibility.
  • You’ve received a chargeback

  • Have a look at this

  • Concise and scannable:

    • Use simple, clear language that can be read at a glance
    • Keep headings to a single sentence and avoid using punctuation such as periods, commas, or semicolons
    • Where possible, avoid articles (the, a, an) to keep content short and actionable
    • Avoid unnecessary terms, for example don’t use “successfully” in banners that confirm an action
  • Informative:

    • Label the type of information in the body content
    • Sentence case: capitalize only the first word in the heading and proper nouns
  • Online store is password protected

  • Your Online Store is now Password Protected

Body content

Body content should:

  • Be concise: keep content to 1 to 2 sentences where possible
  • Clarify the benefit of the main task
  • Be written in sentence case and use appropriate punctuation
  • Avoid repeating the heading
  • Explain how to resolve the issue, particularly for warning and critical banners
  • Your online store has a maximum of 20 themes. Delete unused themes to add more.

  • You have reached your theme limit. Your online store has reached its maximum of 20 themes. To add more themes, delete themes you’re no longer using.

Button and links

Buttons and links should be:

  • Clear and predictable: merchants should be able to anticipate what will happen when they click a button. Never deceive merchants by mislabeling a button.
  • Buy shipping label

  • Buy

  • Action-led: buttons should always lead with a strong verb that encourages action. To provide enough context to merchants use the {verb}+{noun} format on buttons except in the case of common actions like Save, Close, Cancel, or OK.
  • Activate Apple Pay

  • Try Apple Pay

  • Scannable: avoid unnecessary words and articles such as the, an, or a.
  • Add menu item

  • Add a menu item

Link text should:

  • Set the expectation of where merchants will be taken
  • Order #001

  • Order

  • Use consistent content to label navigation. For example, if a navigational link leads to a page called Orders, label the link Orders.
  • Payments

  • Finance section

Secondary body content

Body content should be:

  • Actionable: start sentences with imperative verbs when telling merchants what actions are available to them (especially something new). Don’t use permissive language like “you can”.
  • Get performance data for all your sales channels.

  • Now you can get performance data for all your sales channels.

  • Structured for merchant success: always put the most critical information first.
  • Clear: use the verb “need” to help merchants understand when they’re required to do something.
  • To buy a shipping label, you need to enter the total weight of your shipment, including packaging.

  • To buy a shipping label, you must enter the total weight of your shipment, including packaging.