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.
optional = ?
||Button to display at bottom of banner.|
||Callback fired when banner is dismissed.|
||Visual treatment of the banner based on message purpose.|
||Title of the banner.|
BannerActionAnchor link to section titled "BannerAction"
||Callback when the Banner action button is pressed.|
||Button label text.|
- 📱 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.