The responsive popover displays as a popover on desktop and tablet devices but as a dialog on phones.

Responsive popover

Do

Use the responsive popover:

• To define your own structure.
• To show a dialog on phones.

Don't

Don’t use the responsive popover:

• To show a popover on phones. Use the popover component instead.

1. Title (optional): Including a title also improves accessibility for screen reader users.
2. Content area: Can contain any component. Ensure that the content has a basic design and shows only the most important information.
3. Arrow (optional, desktop/tablet only): By default, the popover has an arrow that connects it visually to the triggering component. You can opt to hide the arrow.
4. Footer (optional): Contains one or more actions.

Anatomy of a responsive popover

On a phone, the responsive popover displays as a dialog.

The responsive popover is shown as a dialog on a phone.