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.
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.
Use when you want merchants to take an action after reading the banner.
Use to update merchants about a change or give them advice.
Use when you want merchants to take an action after reading the banner.
Use to update merchants about a change or give them advice.
Banners should:
success
, info
, warning
and critical
statuses. If the icon is changed, use only major, duotone icons.Banner headings should be:
You’ve received a chargeback
Have a look at this
Concise and scannable:
Informative:
Online store is password protected
Your Online Store is now Password Protected
Body content should:
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.
Buttons and links should be:
Buy shipping label
Buy
Activate Apple Pay
Try Apple Pay
Add menu item
Add a menu item
Link text should:
Order #001
Order
Payments
Finance section
Body content should be:
Get performance data for all your sales channels.
Now you can get performance data for all your sales channels.
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.