Overlays
Overlays temporarily raise supporting information or focused tasks above the page. They should preserve context, provide an obvious exit, and never conceal content merely for visual effect.
Overlay triggers
Use the lightest overlay that gives the task enough room.
Command palette
Search the product list by name.
Selection guide
Section titled “Selection guide”- Use a tooltip for a short, non-essential label.
- Use a popover for compact information related to one control.
- Use a dialog when a decision must interrupt the current task.
- Use a side sheet for a longer supporting task that benefits from page context.