Overlays
Layers over the page: dialogs, confirmations, popovers, menus and tips. Each one traps or returns focus, closes on Escape, keeps a visible border in forced-colors mode and fits a 320px screen, where the modal becomes a bottom sheet.
9 pages, 10 exports
- Modal
- ConfirmDialog
- Popover
- DropdownMenu
- MenuItem
- MenuCheckItem
- MenuLabel
- Tooltip
- InfoTip
- FocusTrap
ImportLink to the section Import
Each group has its own entry, so an app that needs only this group loads only this group. Everything is also exported from @skribly/ui.
import { Modal, ConfirmDialog, Popover, DropdownMenu, … } from '@skribly/ui/overlays'Pages in this groupLink to the section Pages in this group
- ModalA dialog that blocks the page until it is closed. Pick it for a short task, such as a form or a choice, that must finish before going on; the body scrolls and the actions stay in view.Modal
- ConfirmDialogAsks before an action that is hard to undo. It waits for an async action, shows the pending state and keeps the dialog open with an error if the action fails.ConfirmDialog
- PopoverA small panel attached to a button, for extra controls or details that do not need the whole screen. Prefer it to a Modal when the page should stay in view.Popover
- DropdownMenuA list of actions behind a button. MenuItem rows take an icon, a description, a shortcut and a danger tone; pick a menu for commands, not for choosing a form value.DropdownMenu, MenuItem
- MenuCheckItemA menu row that can be checked, for view settings such as visible columns. It needs a selectionMode on the menu or on its MenuLabel group.MenuCheckItem
- MenuLabelA labelled group of menu rows with a dividing line before it. A group can hold its own selection, such as one theme mode next to plain actions.MenuLabel
- TooltipA short hint on hover or keyboard focus. Use it for extra words about a control that already has a name; for anything a touch user needs, use InfoTip.Tooltip
- InfoTipA small round button beside a term that opens a short explanation. Pick it over Tooltip when the text matters, because it works by touch, by keyboard and at any zoom.InfoTip
- FocusTrapKeeps Tab inside a panel of your own while it is open, then gives focus back. Modal, Popover and DropdownMenu already do this; pick FocusTrap for a custom drawer or a guided step.FocusTrap