Dialog

A dialog is a dialog box that overlays the main content to focus the user's attention.

Preview
Code

Installation

npm
yarn
pnpm
bun

npm i @melio-ui/dialog

If @melio-ui/react is already installed globally, you can skip this step.

Import

Individual
Global

import { 
  DialogRoot,
  DialogTrigger,
  DialogPortal,
  DialogBackdrop,
  DialogContent,
  DialogClose,
} from '@melio-ui/dialog';

DialogRoot: All parts of the dialog are included.
DialogTrigger: Used to activate or open the Dialog component.
DialogPortal: Portal the overlay and content portion into the body.
DialogBackdrop: A layer that covers the inactive portion of the view when a dialog box is opened.
DialogContent: Includes the content that will be displayed in the open dialog box.
DialogClose: The button that closes the dialog.

Another way to import

'use client';

import { Dialog } from '@melio-ui/dialog';

<Dialog.Root>
  <Dialog.Trigger asChild>
    <button type="button">Open Dialog</button>
  </Dialog.Trigger>
  <Dialog.Portal>
    <Dialog.Backdrop />
    <ModDialogal.Content>
      <Dialog.Close asChild>
        <button type="button" />
      </Dialog.Close>
      <div>Dialog Content</div>
    </ModDialogal.Content>
  </Dialog.Portal>
</Dialog.Root>;

'use client' must be used when rendering on the server side.

API Reference

DialogRoot

All parts of the dialog are included.

Prop	Type	Default	Description
open	`boolean`	-	Sets whether the drawer is open or closed.
defaultOpen	`boolean`	-	When first rendered, the drawer is in an opened state. Use when there is no need to control the opened state.
onOpenChange	`(open: boolean) => void`	-	This is an event handler that is triggered when the open state of the drawer changes.

DialogTrigger

Used to activate or open the Dialog component.

Prop	Type	Default	Description
asChild	`boolean`	-	Changes the default rendering element passed as a child, merging its props and behavior.

Data attribute	Values
[data-state]	"open" \| "closed"

DialogPortal

Portal the overlay and content portion into the body.

Prop	Type	Default	Description
container	`HTMLElement \| (() => HTMLElement)`	document.body	Specifies the container element to which the content should be portaled.

DialogBackdrop

A layer that covers the inactive portion of the view when a dialog box is opened.

Prop	Type	Default	Description
preventCloseOnClick	`boolean`	-	Prevents closing when clicking on backdrop.

DialogContent

Includes the content that will be displayed in the open dialog box.

Prop	Type	Default	Description
destroyOnClose	`boolean`	true	Used to ensure that the DOM is removed when closed.
forceMount	`boolean`	-	Used to ensure that a component is always rendered in the DOM, regardless of its visibility or whether it's conditionally displayed.
closeOnEsc	`boolean`	true	Determines whether or not to close when the ESC key is pressed.

Data attribute	Values
[data-state]	"open" \| "closed"

DialogClose

The button that closes the dialog.

Prop	Type	Default	Description
asChild	`boolean`	-	Changes the default rendering element passed as a child, merging its props and behavior.

Examples

Position

function DialogPosition() {
  return (
    <DialogRoot>
      <DialogTrigger asChild>
        <button
          type="button"
          style={{
            border: '1px solid #475569',
            borderRadius: 5,
            padding: 10,
          }}
        >
          Open Dialog
        </button>
      </DialogTrigger>
      <DialogPortal>
        <DialogBackdrop />
        <DialogContent style={{ top: 200 }}>
          <DialogClose asChild>
            <CloseIconButton />
          </DialogClose>
          <DialogBody />
          <DialogFooter />
        </DialogContent>
      </DialogPortal>
    </DialogRoot>
  );
}

render(<DialogPosition />);

function CloseIconButton(props) {
  return (
    <button
      {...props}
      type="button"
      style={{
        position: 'absolute',
        top: 0,
        right: 0,
        padding: '0.875rem',
        border: 'none',
        outline: 'none',

        cursor: 'pointer',
        boxSizing: 'border-box',
        color: 'inherit',
        background: 'transparent',
        fontSize: '0.875rem',
        lineHeight: 1,
        verticalAlign: 'middle',
        display: 'inline-flex',
        justifyContent: 'center',
        alignItems: 'center',
      }}
    >
      <svg
        width="1em"
        height="1em"
        viewBox="0 0 24 24"
        fill="currentColor"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
          fill="currentColor"
        />
      </svg>
    </button>
  );
}

function DialogBody() {
  return <div style={{ padding: '2rem' }}>Dialog Content</div>;
}

function DialogFooter() {
  return (
    <div style={{ padding: '1rem 1.5rem', textAlign: 'right' }}>
      <DialogClose asChild>
        <button
          type="button"
          style={{
            backgroundColor: 'transparent',
            marginRight: 3,
          }}
        >
          Close
        </button>
      </DialogClose>
    </div>
  );
}

Custom Size

function DialogCustomSize() {
  return (
    <DialogRoot>
      <DialogTrigger asChild>
        <button
          type="button"
          style={{
            border: '1px solid #475569',
            borderRadius: 5,
            padding: 10,
          }}
        >
          Open Dialog
        </button>
      </DialogTrigger>
      <DialogPortal>
        <DialogBackdrop />
        <DialogContent style={{ width: 800 }}>
          <DialogClose asChild>
            <CloseIconButton />
          </DialogClose>
          <DialogBody />
          <DialogFooter />
        </DialogContent>
      </DialogPortal>
    </DialogRoot>
  );
}

render(<DialogCustomSize />);

function CloseIconButton(props) {
  return (
    <button
      {...props}
      type="button"
      style={{
        position: 'absolute',
        top: 0,
        right: 0,
        padding: '0.875rem',
        border: 'none',
        outline: 'none',

        cursor: 'pointer',
        boxSizing: 'border-box',
        color: 'inherit',
        background: 'transparent',
        fontSize: '0.875rem',
        lineHeight: 1,
        verticalAlign: 'middle',
        display: 'inline-flex',
        justifyContent: 'center',
        alignItems: 'center',
      }}
    >
      <svg
        width="1em"
        height="1em"
        viewBox="0 0 24 24"
        fill="currentColor"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
          fill="currentColor"
        />
      </svg>
    </button>
  );
}

function DialogBody() {
  return <div style={{ padding: '2rem' }}>Dialog Content</div>;
}

function DialogFooter() {
  return (
    <div style={{ padding: '1rem 1.5rem', textAlign: 'right' }}>
      <DialogClose asChild>
        <button
          type="button"
          style={{
            backgroundColor: 'transparent',
            marginRight: 3,
          }}
        >
          Close
        </button>
      </DialogClose>
    </div>
  );
}

Prevent closing when clicking on the backdrop.

function DialogCustomSize() {
  return (
    <DialogRoot>
      <DialogTrigger asChild>
        <button
          type="button"
          style={{
            border: '1px solid #475569',
            borderRadius: 5,
            padding: 10,
          }}
        >
          Open Dialog
        </button>
      </DialogTrigger>
      <DialogPortal>
        <DialogBackdrop preventCloseOnClick />
        <DialogContent>
          <DialogClose asChild>
            <CloseIconButton />
          </DialogClose>
          <DialogBody />
          <DialogFooter />
        </DialogContent>
      </DialogPortal>
    </DialogRoot>
  );
}

render(<DialogCustomSize />);

function CloseIconButton(props) {
  return (
    <button
      {...props}
      type="button"
      style={{
        position: 'absolute',
        top: 0,
        right: 0,
        padding: '0.875rem',
        border: 'none',
        outline: 'none',

        cursor: 'pointer',
        boxSizing: 'border-box',
        color: 'inherit',
        background: 'transparent',
        fontSize: '0.875rem',
        lineHeight: 1,
        verticalAlign: 'middle',
        display: 'inline-flex',
        justifyContent: 'center',
        alignItems: 'center',
      }}
    >
      <svg
        width="1em"
        height="1em"
        viewBox="0 0 24 24"
        fill="currentColor"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
          fill="currentColor"
        />
      </svg>
    </button>
  );
}

function DialogBody() {
  return <div style={{ padding: '2rem' }}>Dialog Content</div>;
}

function DialogFooter() {
  return (
    <div style={{ padding: '1rem 1.5rem', textAlign: 'right' }}>
      <DialogClose asChild>
        <button
          type="button"
          style={{
            backgroundColor: 'transparent',
            marginRight: 3,
          }}
        >
          Close
        </button>
      </DialogClose>
    </div>
  );
}

CircularProgress

Drawer