Dialog

Installation#

npmpnpmyarnbun

npx sugarcoat add dialog

Examples#

Basic Dialog#

Basic

With Form Content#

With Form

Confirmation Dialog#

Confirmation

Controlled State#

Use the open and onOpenChange props for programmatic control.

Controlled

Minimal Dialog#

A simplified dialog without header/footer structure.

Minimal

Anatomy#

The Dialog component consists of several compound parts:

<Dialog>                    {/* Root - controls open state */}
  <Dialog.Trigger>          {/* Opens the dialog */}
    <Button>Open</Button>
  </Dialog.Trigger>
  <Dialog.Portal>           {/* Renders in a portal */}
    <Dialog.Backdrop />     {/* Overlay behind dialog */}
    <Dialog.Popup>          {/* Dialog container */}
      <Dialog.Header>       {/* Header section */}
        <Dialog.Title>      {/* Title text */}
        <Dialog.Close>      {/* Close button */}
          <Dialog.CloseIcon />
        </Dialog.Close>
      </Dialog.Header>
      <Dialog.Body>         {/* Main content area */}
        <Dialog.Description>
      </Dialog.Body>
      <Dialog.Footer>       {/* Footer with actions */}
      </Dialog.Footer>
    </Dialog.Popup>
  </Dialog.Portal>
</Dialog>

Usage#

Import

import { Dialog, Button } from "@sugarcoat/ui-nxt";

Usage

<Dialog>
<Dialog.Trigger>
  <Button>Open Dialog</Button>
</Dialog.Trigger>
<Dialog.Portal>
  <Dialog.Backdrop />
  <Dialog.Popup>
    <Dialog.Header>
      <Dialog.Title>Title</Dialog.Title>
      <Dialog.Close><Dialog.CloseIcon /></Dialog.Close>
    </Dialog.Header>
    <Dialog.Body>Content here</Dialog.Body>
    <Dialog.Footer>
      <Dialog.Close>
        <Button variant="outline">Cancel</Button>
      </Dialog.Close>
      <Button>Confirm</Button>
    </Dialog.Footer>
  </Dialog.Popup>
</Dialog.Portal>
</Dialog>

Props#

Dialog (Root)#

Prop	Type	Default	Description
open	boolean	-	Controlled open state
onOpenChange	(open: boolean) => void	-	Callback when open state changes
defaultOpen	boolean	false	Initial open state for uncontrolled usage
modal	boolean	true	Whether dialog is modal (traps focus)

Dialog.Trigger#

Prop	Type	Default	Description
childrenrequired	ReactNode	-	Element that triggers the dialog

Dialog.Popup#

Prop	Type	Default	Description
children	ReactNode	-	Dialog content

Dialog.Close#

Prop	Type	Default	Description
children	ReactNode	-	Close button content

Accessibility#

Focus Management: Focus is automatically trapped within the dialog when open
Keyboard: Press Escape to close the dialog
Backdrop Click: Clicking outside the dialog closes it (configurable)
ARIA: Proper role="dialog", aria-modal, aria-labelledby, and aria-describedby attributes
Screen Readers: Title and description are announced when dialog opens