Examples
Use when presenting a set of actions in a disclosable menu.
Popovers are small overlays that open on demand. They let merchants access additional content and actions without cluttering the page.
Use when presenting a set of actions in a disclosable menu.
Popovers usually contain an option list or an action list, but can also contain other controls or content.
To assist screen readers with sending focus to an action list, pass autofocusTarget='first-node'
to Popover
. This will avoid known issues a screen reader may have with keyboard support once focus is moved off the activator.
Web browsers assign a default value of 'menu' to the aria-haspopup
role. You can use the prop ariaHaspopup
to specify a value. Screen readers may fail to send focus to the Popover
content when they expect the content to be adjacent to the element with aria-haspopup
in the DOM tree. In this scenario, it is recommended not to provide the ariaHaspopup
prop.
Use when presenting a set of actions in a disclosable menu.
Use to present a combination of content, instructions, and actions in a panel for tasks that are of low or secondary importance to the current page. When used this way, popovers provide useful entry points to related features without overwhelming merchants.
See Material Design and development documentation about accessibility for Android:
Use when presenting a set of actions in a disclosable menu.
Use to present a combination of content, instructions, and actions in a panel for tasks that are of low or secondary importance to the current page. When used this way, popovers provide useful entry points to related features without overwhelming merchants.
Use when you have few actions that affects the whole page. Action sheets doesn’t support icons or additional information.
See Apple’s Human Interface Guidelines and API documentation about accessibility for iOS:
Popovers should:
If a popover contains actions, they should:
Create order
Buy shipping label
New order
Buy
Rename
Edit HTML
Duplicate
HTML editing options
File name changes
Duplicate this order so that you can make edits, updates, or changes
Add menu item
Add a menu item
If the popover includes a series of navigational links, each item should:
Online store
Messenger
Buy Button
Sales channel