Skip to content
Design System
العربية

Dialogs and overlays

import"@truvar-ai/design-system"

Dialogs and overlays

Overlays trap focus while open, close with Escape and return focus to whatever opened them.

Dialog

Built on DialogTrigger + Modal

Focus is trapped inside and returns to the button on close. Esc closes it.

Confirmation

Built on Modal + Dialog

For consequential but reversible actions. The confirm label repeats the action.

Destructive confirmation

Built on Modal + Dialog (alertdialog)

For actions you can't undo: the person types the name to unlock the button, and clicking outside doesn't close it.

Large dialog

Built on Modal

Wider on desktop and full screen on phones; small dialogs become bottom sheets on phones.

Drawer

Built on Modal (start / end)

Opens from the start or end edge, so it mirrors in Arabic. See the full HubSpot-style example in Record panel.

Sheet

Built on SheetTrigger + SheetOverlay + Sheet

Slides in from any edge and can be swiped away on touch screens. Snap points let a bottom sheet rest half open.

Popover

Built on DialogTrigger + Popover + OverlayArrow

Non-modal: for short explanations next to what they explain.

Win rate 67%

Tooltip

Built on TooltipTrigger

Appears on hover and on keyboard focus.