Skip to content

Overlays

The overlays components of @arbol-ai/ui: CommandPalette, ConfirmDialog, InfoTip, Menu, Overlay, Popover, RowMenu, Tooltip.

  • CommandPalette: Search and commands in one modal that Ctrl+K (⌘K) opens from anywhere, and the list of keyboard shortcuts that ? opens.
  • ConfirmDialog: The one question before something irreversible: Cancel is focused, the action is red, and a failure stays in the question. For the gravest actions, the person types the name first.
  • InfoTip: A small round ⓘ beside a label that explains it in plain words. It opens on a click, a tap or the keyboard, so it reaches touch screens, unlike a tooltip.
  • Menu: A dropdown of actions or options on the popover surface: icons, a second line, shortcuts, links, submenus, and radio or checkbox items.
  • Overlay: Every modal dialog, side sheet and alert question. It never loses what someone typed by accident: closing with unsaved input asks first, and nothing closes it while a save runs.
  • Popover: A floating panel anchored to its trigger, for filters, a quick form or details that do not deserve a dialog. Focus moves in, and Esc or a click outside closes it.
  • RowMenu: The “⋯” of a row or a record: its everyday actions without opening it, destructive ones last and in red. A press on it never opens the row.
  • Tooltip: A short hint that opens when its trigger is hovered or focused. It never opens on touch screens, so the trigger must make sense without it; use InfoTip for explanations people tap to read.

Type to search…

↑↓ navigate↵ selectEsc close