Overlays & Loading Indicators

NkModal Dialog

Fully accessible dialog with backdrop dimming, screen reader announcements, ESC-key dismiss, and layout animation.

AlertDialog (confirm)

react-aria role="alertdialog": not dismissable by backdrop click, confirm/cancel close the dialog and run their handler. Used for destructive confirmations.

DropdownMenu

react-aria menu: arrow-key navigation, typeahead, disabled items, closes on select. Items run their handler via onClick.

Tooltip

react-aria tooltip: shows on hover and keyboard focus, dismisses on blur. Tab to the button to see it without a mouse.

NkLoadingSpinner

Size sm:

Size md with message:

Loading in progress...

Size lg:

Loading page

NkDialog (compound)

The most-used overlay in the app (24 files across hub / admin / account dialogs). Unlike NkModal's prop-driven API, this is a Radix-style compound: you control open / onOpenChange on NkDialog and compose the body from NkDialogContent, NkDialogHeader,NkDialogTitle, NkDialogDescription, and NkDialogFooter. It wraps react-aria's Modal, so the title and description are aria-wired via slot="title" / slot="description" internally.

NkDrawer (side panel)

A right-side overlay drawer portaled to document.body, used for side panels like infra / environment detail. Fully controlled via isOpen / onClose with a required ariaLabel; Escape and backdrop click dismiss, and body scroll locks while open. The children are the panel's own layout — build the header / scrollable body / footer inside.