Dialog

Beta

Modal overlay container with header, body, and footer composition slots.

Installation

npm install @xaui/native

Import

import { Dialog, DialogHeader, DialogBody, DialogFooter } from '@xaui/native/dialog'

Basic Usage

Minimal example showing the component with its default configuration.

import { Dialog } from '@xaui/native/dialog'

export function Example() {
  return <Dialog />
}

Basic Dialog

Open and close a modal with header, body, and footer actions.

import { useState } from 'react'
import { Dialog, DialogBody, DialogFooter, DialogHeader } from '@xaui/native/dialog'
import { Button } from '@xaui/native/button'
import { Column } from '@xaui/native/view'

export function BasicDialogExample() {
  const [isOpen, setIsOpen] = useState(false)

  return (
    <Column gap={10}>
      <Button onPress={() => setIsOpen(true)}>Open dialog</Button>
      <Dialog isOpen={isOpen} onClose={() => setIsOpen(false)}>
        <DialogHeader isClosable>Delete item</DialogHeader>
        <DialogBody>
          This action is permanent and cannot be undone.
        </DialogBody>
        <DialogFooter>
          <Button variant="flat" onPress={() => setIsOpen(false)}>Cancel</Button>
          <Button themeColor="danger" onPress={() => setIsOpen(false)}>Delete</Button>
        </DialogFooter>
      </Dialog>
    </Column>
  )
}

Size and Placement

Control where the dialog appears and how wide it is.

import { useState } from 'react'
import { Dialog, DialogBody, DialogFooter, DialogHeader } from '@xaui/native/dialog'
import { Button } from '@xaui/native/button'
import { Row } from '@xaui/native/view'

export function DialogPlacementExample() {
  const [isOpen, setIsOpen] = useState(false)

  return (
    <>
      <Row gap={8}>
        <Button onPress={() => setIsOpen(true)}>Open bottom dialog</Button>
      </Row>
      <Dialog
        isOpen={isOpen}
        onClose={() => setIsOpen(false)}
        placement="bottom"
        size="lg"
        backdrop="blurred"
      >
        <DialogHeader isClosable>Session timeout</DialogHeader>
        <DialogBody>Your session will expire in 2 minutes.</DialogBody>
        <DialogFooter>
          <Button onPress={() => setIsOpen(false)}>Extend session</Button>
        </DialogFooter>
      </Dialog>
    </>
  )
}

Controlled Open State

Use onOpenChange to sync dialog state with external state.

import { useState } from 'react'
import { Dialog, DialogBody, DialogHeader } from '@xaui/native/dialog'
import { Button } from '@xaui/native/button'
import { Column } from '@xaui/native/view'

export function ControlledDialogExample() {
  const [isOpen, setIsOpen] = useState(false)

  return (
    <Column gap={10}>
      <Button onPress={() => setIsOpen(true)}>Open</Button>
      <Dialog isOpen={isOpen} onOpenChange={setIsOpen} closeOnBackdropPress>
        <DialogHeader isClosable>Dialog title</DialogHeader>
        <DialogBody>
          Tap the close button or backdrop to trigger onOpenChange(false).
        </DialogBody>
      </Dialog>
    </Column>
  )
}