Learn 36 Overlays concepts for Frontend development, with definitions, aliases, and ready-to-use AI prompts.
A focused task window that makes the page behind it temporarily inactive.
Create an accessible modal dialog with a labelled title, an initial focus target, focus containment, Escape-key dismissal, an inert backdrop, and focus restoration to the opening control.An urgent modal message that requires acknowledgement or a decision.
Create an accessible alert dialog for an urgent session-expiry warning using role alertdialog, a concise consequence, one primary action, an optional safe alternative, and keyboard focus on the least destructive choice.A final check before a consequential or destructive action is committed.
Create a confirmation dialog for deleting a project. State the project name and irreversible consequence, visually distinguish Cancel from Delete, default focus to Cancel, support Escape, and return focus to the delete trigger.A compact form presented in a dialog without leaving the current context.
Create an accessible form dialog for inviting a teammate with labelled fields, inline validation, Cancel and Send invite actions, focus on the first field, and submission that preserves errors without closing.A multi-step modal flow for completing one bounded task.
Create a three-step setup wizard dialog with a visible progress indicator, meaningful step titles, Back and Continue actions, validation before advancing, preserved input, and a review step before completion.A modal task surface that occupies the viewport for complex work on small screens.
Create a responsive full-screen dialog for editing a report, with a persistent title bar, close and save actions, internal scrolling, safe-area spacing, unsaved-change confirmation, and correct focus restoration.A floating window that stays open while the rest of the interface remains usable.
Create a non-modal find-and-replace dialog that can stay open while the document remains interactive. Provide a clear title, close control, sensible tab order, draggable visual affordance, and no inert backdrop.A dialog that asks the user to select one option from a short set.
Create an accessible choice dialog for selecting an export format. Use a short radio group with helpful descriptions, preserve the current choice, and provide Cancel and Export actions with a clearly named dialog.A security dialog that verifies identity before a sensitive action.
Create a reauthentication dialog before revealing an API secret. Explain why verification is required, request the account password, support a passkey alternative, avoid exposing sensitive values, and return to the original action after success.A brief, non-interactive label or hint anchored to a control.
Create an accessible tooltip for an icon-only button. Show it on hover and keyboard focus after a short delay, connect it with aria-describedby, keep the text concise and non-interactive, and dismiss it on Escape or pointer exit.A short explanation of an unfamiliar term shown next to the term.
Create a definition tooltip for the term API. Make the trigger keyboard focusable, announce the definition through aria-describedby, show it on focus or hover, keep it concise, and do not place links or buttons inside it.A click-triggered help bubble that may contain richer text or actions.
Create a toggletip opened by an information button. Use aria-expanded and aria-controls, allow a short explanation and Learn more link, close on Escape or outside click, and return focus to the trigger.A small anchored surface with contextual content and optional actions.
Create a profile popover anchored to an avatar with the person’s role and two related actions. Position it within the viewport, connect it to the trigger, close on Escape or outside click, and avoid nested popovers.A preview card that reveals more information about a linked item.
Create an accessible hover card for a team member link. Open it on hover and focus without stealing focus, include a compact profile preview, keep it open while the pointer moves into it, and dismiss it predictably.A button that opens a menu of actions or choices.
Create an accessible menu button labelled Actions with aria-haspopup and aria-expanded. Support Enter, Space and arrow keys, move focus among menu items, close on Escape, and restore focus to the trigger.A compact menu for secondary actions that do not fit in the main interface.
Create an accessible overflow menu opened by an icon button named More actions. Include Rename, Duplicate and Delete, preserve a logical order, expose the button name to assistive technology, and close after a selection.A menu of actions relevant to the item or area that invoked it.
Create a context menu for a file row that opens by right-click and a keyboard-accessible actions button. Position it near the invocation point, use menu semantics, support arrow-key navigation, and provide Rename, Move and Delete.A nested menu that reveals a related second level of commands.
Create an accessible submenu under Move to with a visible direction indicator, delayed pointer opening, arrow-key navigation between parent and child menus, Escape behavior one level at a time, and viewport-aware positioning.A side panel that reveals primary destinations, commonly on compact screens.
Create a responsive navigation drawer opened by a menu button. On mobile, add a dismissible scrim, trap focus while modal, close on Escape or destination selection, and restore focus to the menu button.A side panel that blocks interaction with the underlying page until dismissed.
Create a modal drawer for editing project settings. Slide it from the right, add a scrim, keep focus inside, provide a labelled close button, allow Escape dismissal, and restore focus to the original trigger.A side panel that stays visible while the main content remains interactive.
Create a non-modal activity drawer beside a dashboard. Keep the main content usable, provide a persistent close control, resize or reflow content rather than covering essential controls, and preserve the user’s open state.A supplementary surface anchored to the left or right edge for related work.
Create a responsive side sheet showing customer details beside a results table. Use a clear heading, close control, internal scrolling, adaptive modal behavior on narrow screens, and no loss of table context on desktop.A touch-friendly panel that rises from the bottom edge of the screen.
Create a mobile bottom sheet for choosing a delivery time. Include a drag handle, clear heading, large touch targets, safe-area padding, a scrim for modal use, swipe or close-button dismissal, and sensible focus behavior.A mobile sheet presenting a short set of context-specific actions.
Create a mobile action sheet for a photo with Share, Duplicate and Delete actions plus a separate Cancel action. Use large touch targets, make destructive styling explicit, and dismiss after selection or Escape.A system-style surface for choosing people, apps, or sharing actions.
Create a share sheet for a project link with recent people, app destinations, Copy link and Download actions. Use a responsive grid, clear accessible labels, keyboard navigation, and native share APIs when available.A temporary panel containing controls that refine a data view.
Create a responsive filter panel for a product list with applied-filter count, grouped controls, Clear all and Show results actions, preserved selections, and modal drawer behavior on small screens.A contextual properties panel for examining or editing the selected object.
Create an inspector panel for the selected design layer with collapsible sections for Position, Appearance and Accessibility. Keep canvas selection synchronized, provide labelled controls, and support a persistent desktop panel plus mobile sheet.A focused image viewer displayed over a darkened page.
Create an accessible image lightbox with a large image, caption, close button, dark backdrop, Escape dismissal, contained focus, zoom controls, and focus restoration to the thumbnail that opened it.An immersive media viewer with previous and next navigation.
Create a gallery overlay with previous and next controls, image count, captions, thumbnail context, arrow-key navigation, swipe gestures on touch devices, image preloading, and an accessible close action.A modal player for watching video without navigating away.
Create an accessible video overlay with native media controls, captions, a descriptive title, focus containment, Escape and close-button dismissal, no unexpected autoplay with sound, and playback pause when closed.A searchable overlay for quickly finding commands and destinations.
Create a command palette opened with Ctrl or Command plus K. Include a labelled search input, grouped commands, fuzzy filtering, keyboard selection, recent items, Escape dismissal, and focus restoration to the prior control.A prominent search surface layered above the current page.
Create a global search overlay with immediate input focus, recent searches, live grouped results, an announced result count, arrow-key navigation, Escape dismissal, and a full-screen mobile adaptation.A highlighted interface area paired with a short explanatory callout.
Create an onboarding spotlight that highlights the Publish button and anchors a concise coach mark beside it. Keep the target visible, provide Skip and Got it actions, avoid trapping users, and remember dismissal.A sequence of anchored callouts that introduces key parts of an interface.
Create a four-step guided product tour with anchored callouts, step count, Back, Next and Skip controls, resilient positioning, keyboard navigation, reduced-motion support, and completion saved per user.A temporary experience that completely replaces the underlying interface.
Create a full-screen takeover for a required workspace migration. Explain the reason and expected time, preserve progress, provide one clear primary action and a help route, handle refresh safely, and meet dialog accessibility requirements.A dimmed layer that separates a modal surface from the page beneath it.
Create a backdrop scrim for a modal surface using a subtle translucent color that preserves context without competing with the foreground. Prevent background interaction and scrolling, and make scrim-click dismissal configurable.