Dialog

Display a modal or non-modal dialog box.

#
Documentation

#
Usage

Use the open and defaultOpen props to toggle between controlled and uncontrolled usage. And combine it with onOpenChange to listen for changes to the state.

import {
  Dialog,
  DialogBody,
  DialogClose,
  DialogContent,
  DialogFooter,
  DialogTitle,
  DialogTrigger,
} from "@optiaxiom/react";
import { useState } from "react";
 
export function App() {
  const [open, setOpen] = useState(false);
 
  return (
    <Dialog onOpenChange={setOpen} open={open}>
      <DialogTrigger>Open Dialog</DialogTrigger>
 
      <DialogContent aria-describedby={undefined}>
        <DialogTitle>Modal Title</DialogTitle>
 
        <DialogBody>This is the modal body</DialogBody>
 
        <DialogFooter>
          <DialogClose appearance="primary">Close</DialogClose>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}

#
Sizes

Use the size prop to change the size of the dialog box.

Size

import {
  Dialog,
  DialogBody,
  DialogClose,
  DialogContent,
  DialogFooter,
  DialogTitle,
  DialogTrigger,
} from "@optiaxiom/react";
import { type ComponentPropsWithRef } from "react";
 
export function App({
  size,
}: Pick<ComponentPropsWithRef<typeof DialogContent>, "size">) {
  return (
    <Dialog>
      <DialogTrigger>Open Dialog</DialogTrigger>
 
      <DialogContent aria-describedby={undefined} size={size}>
        <DialogTitle>Modal Title</DialogTitle>
        <DialogBody>This is the modal body</DialogBody>
        <DialogFooter>
          <DialogClose appearance="primary">Close</DialogClose>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}

#
Close button

Use the withCloseButton prop to show a close button to the top right of the modal.

import {
  Dialog,
  DialogBody,
  DialogClose,
  DialogContent,
  DialogFooter,
  DialogTitle,
  DialogTrigger,
} from "@optiaxiom/react";
 
export function App() {
  return (
    <Dialog>
      <DialogTrigger>Open Dialog</DialogTrigger>
 
      <DialogContent aria-describedby={undefined} withCloseButton>
        <DialogTitle>Modal Title</DialogTitle>
        <DialogBody>This is the modal body</DialogBody>
        <DialogFooter>
          <DialogClose appearance="primary">Close</DialogClose>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}

#
Description

You can add accessible description to the modal using the DialogDescription component.

Make sure to pass aria-describedby={undefined} to DialogContent if you do not want to include a description.

import {
  Dialog,
  DialogClose,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogTitle,
  DialogTrigger,
} from "@optiaxiom/react";
 
export function App() {
  return (
    <Dialog>
      <DialogTrigger>Open Dialog</DialogTrigger>
 
      <DialogContent>
        <DialogTitle>Modal Title</DialogTitle>
        <DialogDescription>
          This is additional description of the modal
        </DialogDescription>
        <DialogFooter>
          <DialogClose>Close</DialogClose>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}

#
Non modal usage

Set modal prop to false in order to render a non-modal dialog box. This will remove the backdrop overlay and only render the dialog box.

Modal

Size

import {
  Dialog,
  DialogBody,
  DialogClose,
  DialogContent,
  DialogFooter,
  DialogTitle,
  DialogTrigger,
} from "@optiaxiom/react";
import { type ComponentPropsWithRef } from "react";
 
export function App({
  modal = false,
  size,
}: Pick<ComponentPropsWithRef<typeof Dialog>, "modal"> &
  Pick<ComponentPropsWithRef<typeof DialogContent>, "size">) {
  return (
    <Dialog modal={modal}>
      <DialogTrigger>Open Dialog</DialogTrigger>
 
      <DialogContent aria-describedby={undefined} size={size}>
        <DialogTitle>Modal Title</DialogTitle>
        <DialogBody>This is the modal body</DialogBody>
        <DialogFooter>
          <DialogClose appearance="primary">Close</DialogClose>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}

#
Trigger

#
Customize trigger

By default we use the Button component for the dialog trigger which accepts all of the existing button props.

We can also completely change the trigger by using asChild and passing our own component.

import {
  Dialog,
  DialogBody,
  DialogClose,
  DialogContent,
  DialogFooter,
  DialogTitle,
  DialogTrigger,
} from "@optiaxiom/react";
import { IconRefresh } from "@tabler/icons-react";
 
export function App() {
  return (
    <Dialog>
      <DialogTrigger
        appearance="primary"
        aria-label="Re-publish changes"
        icon={<IconRefresh />}
      />
 
      <DialogContent aria-describedby={undefined}>
        <DialogTitle>Modal Title</DialogTitle>
        <DialogBody>This is the modal body</DialogBody>
        <DialogFooter>
          <DialogClose appearance="primary">Close</DialogClose>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}

#
Props

#
`Dialog`

Name	Type
defaultOpen	`false \| true`
modal	`false \| true`
onOpenChange	`(open: boolean) => void`
open	`false \| true`