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.
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
Anchor link to section titled "BannerAction"| Name | Type | Description |
|---|---|---|
| onAction | () => void |
Callback when the Banner action button is pressed. |
| content | string |
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.