Banner

Banners inform merchants about important changes or persistent conditions. Use this component if you need to communicate to merchants in a prominent way.

Learn more about best practices and guidelines on using Banners.

Props

optional = ?

Name Type Description
action? BannerAction Button to display at bottom of banner.
onDismiss? () => void Callback fired when banner is dismissed.
status? "success" | "info" | "attention" | "warning" | "new" Visual treatment of the banner based on message purpose.
title? string Title of the banner.

BannerAction

Name Type Description
onAction () => void Callback when the Banner action button is pressed.
content string Button label text.

Guidelines

  • 📱 Do not nest other components other than Text. They will not be rendered. Use nested Text to render text content within the Banner.
  • 📱 Do not nest banners inside horizontal Stacks, Pressables, ResourceItems, Cards, or CardSections. This will result in unintended behavior.
✅ Do 🛑 Don't
Place Banners at the top of the page or section they apply to Use too many Banners at one time
Use status to provide additional context to the merchant

For more guidelines, refer to Polaris' Banner best practices.

On this page