import { Meta } from '@storybook/addon-docs/blocks';

<Meta title="Design Language/Patterns/Popovers, dialogs, modals" tags={['!manifest', 'wip']} />

# Popovers, dialogs, modals

This page is under construction. It will cover what appears on top of a view, which of these to reach
for, and how people dismiss it.

The guidance available today lives in Figma:

- [Bottom sheet (App)](https://www.figma.com/design/Lb52P9uT9HmhnR3PNjMiCX/Path--Components?node-id=17480-30905&p=f&t=VK1SG0SURpYhlbPF-0)
- [Full-page modal (App)](https://www.figma.com/design/Lb52P9uT9HmhnR3PNjMiCX/Path--Components?node-id=17480-26587&p=f&t=VK1SG0SURpYhlbPF-0)
- [Modals (App)](https://www.figma.com/design/Lb52P9uT9HmhnR3PNjMiCX/Path--Components?node-id=375-47691&p=f&t=VK1SG0SURpYhlbPF-0)
- [Dialog (Web)](https://www.figma.com/design/Lb52P9uT9HmhnR3PNjMiCX/Path--Components?node-id=17769-144105)

In code, the components involved are [Dialog](/docs/components-dialog-guidelines--docs),
[AlertDialog](/docs/components-alertdialog-guidelines--docs),
[DropdownMenu](/docs/components-dropdownmenu-guidelines--docs) and
[Tooltip](/docs/components-tooltip--docs) — see also the
[Popovers convention](/docs/conventions-popovers--docs), which covers how the popover-like components
work together in code.