Dialog

The Dialog component displays content in a modal overlay, capturing user attention. It provides a flexible way to create modal dialogs with backdrop, positioning, and focus management.

Demo

React

Vue

Example

React

import { useRef } from 'react';
import {
  Button,
  Dialog,
  useDisclosure,
} from '@fintech-sandpit/ui/react';

const {
  open,
  onOpen,
  onClose,
} = useDisclosure();

const initialFocusEl = useRef<HTMLButtonElement>(null);

return (
  <Dialog.Root
    open={open}
    initialFocusEl={() => initialFocusEl.current}
    onOpen={onOpen}
    onClose={onClose}
  >
    <Button
      colorScheme="primary"
      onClick={onOpen}
    >
      Open Dialog
    </Button>

    <Dialog.Content>
      <Dialog.Title>
        Hey!
      </Dialog.Title>

      <Dialog.Description>
        I'm a dialog!
      </Dialog.Description>

      <Dialog.Footer>
        <Button
          ref={initialFocusEl}
          onClick={onClose}
        >
          Close me
        </Button>
      </Dialog.Footer>

      <Dialog.CloseTrigger />
    </Dialog.Content>
  </Dialog.Root>
);

Vue

<script setup lang="ts">
import { ref } from 'vue';
import {
  Button,
  Dialog,
  useDisclosure,
} from '@fintech-sandpit/ui/vue';

const {
  open,
  onOpen,
  onClose,
} = useDisclosure();

const initialFocusEl = ref<HTMLButtonElement | null>(null);
</script>

<template>
  <Dialog.Root
    :open="open"
    :initial-focus-el="() => initialFocusEl"
    @open="onOpen"
    @close="onClose"
  >
    <Button
      color-scheme="primary"
      @click="onOpen"
    >
      Open Dialog
    </Button>

    <Dialog.Content>
      <Dialog.Title>
        Hey!
      </Dialog.Title>

      <Dialog.Description>
        I'm a dialog!
      </Dialog.Description>

      <Dialog.Footer>
        <Button
          ref="initialFocusEl"
          @click="onClose"
        >
          Close me
        </Button>
      </Dialog.Footer>

      <Dialog.CloseTrigger />
    </Dialog.Content>
  </Dialog.Root>
</template>

Props

React

Name	Type	Default	Description
open	boolean	false	Whether the dialog is open
defaultOpen	boolean	false	Whether the dialog is open by default
modal	boolean	true	Whether the dialog is modal
closeOnInteractOutside	boolean	true	Whether to close on outside interaction
closeOnEscape	boolean	true	Whether to close on Escape key
initialFocusEl	() => HTMLElement | null	—	Function that returns the element to focus initially
finalFocusEl	() => HTMLElement | null	—	Function that returns the element to focus finally
trapFocus	boolean	true	Whether to trap focus inside the dialog
preventScroll	boolean	false	Whether to prevent scroll when the dialog is opened
restoreFocus	boolean	true	Whether to restore focus when the dialog is closed
lazyMount	boolean	true	Whether to lazy mount the dialog content
unmountOnExit	boolean	true	Whether to unmount the dialog content when it is closed
role	'dialog' | 'alertdialog'	'dialog'	The role of the dialog

Vue

Name	Type	Default	Description
open	boolean	false	Whether the dialog is open
default-open	boolean	false	Whether the dialog is open by default
modal	boolean	true	Whether the dialog is modal
close-on-interact-outside	boolean	true	Whether to close on outside interaction
close-on-escape	boolean	true	Whether to close on Escape key
initial-focus-el	() => HTMLElement | null	—	Function that returns the element to focus initially
final-focus-el	() => HTMLElement | null	—	Function that returns the element to focus finally
trap-focus	boolean	true	Whether to trap focus inside the dialog
prevent-scroll	boolean	false	Whether to prevent scroll when the dialog is opened
restore-focus	boolean	true	Whether to restore focus when the dialog is closed
lazy-mount	boolean	true	Whether to lazy mount the dialog content
unmount-on-exit	boolean	true	Whether to unmount the dialog content when it is closed
role	'dialog' | 'alertdialog'	'dialog'	The role of the dialog

Events

React

Name	Arguments	Description
onOpen	() => void	Callback fired when dialog is opened
onClose	() => void	Callback fired when dialog is closed

Vue

Name	Payload	Description
open	void	Event emitted when dialog is opened
close	void	Event emitted when dialog is closed