Skip to Content
ComponentsDialog

Dialog

Radix-based modal primitives with high z-index (suitable above ERP shells) and optional permission gating on DialogTrigger.

Interactive demo

Default

<Dialog>
  <DialogTrigger asChild>
    <Button>Open dialog</Button>
  </DialogTrigger>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>Title</DialogTitle>
      <DialogDescription>Description text.</DialogDescription>
    </DialogHeader>
    <DialogFooter>
      <Button variant="outline">Cancel</Button>
      <Button>Confirm</Button>
    </DialogFooter>
  </DialogContent>
</Dialog>

Permission on trigger (hide when denied)

Import

import {
  Dialog,
  DialogTrigger,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogDescription,
  DialogFooter,
  DialogClose,
} from '@sumx/ui';

Controlled example

const [open, setOpen] = useState(false);
 
<Dialog open={open} onOpenChange={setOpen}>
  <DialogTrigger asChild>
    <Button variant="outline">Session details</Button>
  </DialogTrigger>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>Another session is active</DialogTitle>
      <DialogDescription>
        Sign in again to continue on this tab.
      </DialogDescription>
    </DialogHeader>
    <DialogFooter>
      <DialogClose asChild>
        <Button variant="white">Cancel</Button>
      </DialogClose>
      <Button variant="primary" onClick={onConfirm}>
        Sign in
      </Button>
    </DialogFooter>
  </DialogContent>
</Dialog>

Components

ExportRole
DialogRoot (open / onOpenChange)
DialogTriggerOpens dialog; supports permission / permissionMode
DialogContentPanel + overlay; includes close control
DialogHeader / DialogFooterLayout helpers
DialogTitle / DialogDescriptionAccessible labels
DialogCloseCloses on activate
DialogOverlay / DialogPortalLower-level Radix parts (re-exported)

Permission on trigger

Same semantics as Button:

<DialogTrigger permission={['admin.settings']} permissionMode="hide">
  Open settings
</DialogTrigger>

When denied with hide, the trigger is not rendered (null).

Styling notes

  • Overlay/content use z-index ~99990 so dialogs sit above legacy portal chrome.
  • Uses cn() and Tailwind tokens (primary, destructive, etc.) — ensure host app scans @sumx/ui (see Components overview).

Kit usage

@sumx/ssr-auth-react uses this Dialog for cross-tab session messaging (CheckTokenCrossTabSessionDialog), so portal and kit share one visual system.

ButtonInput