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.
Banners provide context and assist workflows for merchants with disabilities.
role=”alert”
and are announced by assistive technologies when they appear.role=”status”
and are read after any critical announcements.aria-live
attribute and are announced by assistive technologies when their content is updated. These announcements can be disabled by using the prop stopAnnouncements
.aria-describedby
to describe their purpose to assistive technologies when they’re announced or receive focus. If a banner has a title
, then the title content is used for the aria-describedby
. If the banner doesn’t have a title
, then all of the banner content is used for the aria-describedby
.tabindex=”0”
and display a visible keyboard focus indicator. Because of this, merchants can discover banners while tabbing through forms or other interactions, and developers can programmatically move focus to banners.When merchants submit long or complex forms with errors, use a critical banner to summarize what went wrong. Place the banner at the top of the form and move focus to the banner when the form is submitted. This allows all merchants to move through the form in a logical order to correct the issues.
Always include inline error messages for specific form fields so that merchants know what to do in context as they correct their mistakes.
To learn about creating helpful and accessible error message text, see the guidelines for error messages.
role=”alert”
) banners to convey information that the merchant doesn’t need to address immediatelyUse when you want merchants to take an action after reading the banner.
Use to update merchants about a change or give them advice.
See Material Design and development documentation about accessibility for Android:
Use when you want merchants to take an action after reading the banner.
Use to update merchants about a change or give them advice.
See Apple’s Human Interface Guidelines and API documentation about accessibility for iOS:
Banners should:
success
, info
, warning
and critical
statuses. If the icon is changed, use only major, duotone icons.To learn about writing helpful and accessible error message text, see the guidelines for error messages.
Banner titles should follow the content guidelines for headings and subheadings.
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.