Updated 18 December 2024
Banner
Updated 18 Dec 2024View Figma
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.
Properties
Tone
Use the tone to communicate the status and meaning of the banner.
In card
Sets banner style for when it is within a Card.
Title
The ‘Title’ property shows or hides the banner title.
Actions
Shows and hides buttons in the footer of the Banner. A Banner can have either one or two buttons. The primary action is on the left while a secondary action is on the right.
Mobile
Border radius
Change the mode to ‘Mobile’ to remove the border radius of the Banner.
Banner(12 variants)