Оверлеи

Быстрые правила выбора

• Используйте Tooltip для коротких неинтерактивных подсказок.
• Используйте Popover для короткого привязанного немодального содержимого.
• Используйте Dialog для сфокусированных модальных задач.
• Используйте Drawer для сценариев в боковой панели, сохраняющих контекст страницы.
• Используйте Sheet для удобных для касаний панелей или поведения нижней шторки.

По силе взаимодействия

• Только подсказка: Tooltip
• Лёгкое контекстное содержимое: Popover
• Сильное модальное прерывание: Dialog
• Боковой сценарий с сохранением контекста: Drawer
• Выдвижная панель с приоритетом мобильных устройств: Sheet

Частые ошибки классификации

• Не используйте Popover для модальных или деструктивных сценариев.
• Не используйте Dialog, когда содержимое на самом деле ведёт себя как боковая панель или нижняя шторка.
• Не используйте Tooltip для интерактивного содержимого.
• Не используйте Drawer, когда задача должна ощущаться центрированной и ограниченной.
• Не используйте Sheet, если точки привязки (snap points) или поведение выдвижной панели не являются частью UX.

С чего начать

• Быстрые контекстные действия: Popover
• Подтверждения и сфокусированные формы: Dialog
• Фильтры, инспекторы, панели участников: Drawer
• Оформление заказа или мобильные панели действий: Sheet
• Дополнительные подсказки: Tooltip