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

Usage

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
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

Vue

Name	Type	Default	Description
open	boolean	false	Whether the dialog is open
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

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