Dialog

Dialog displays a container that displays a notification.

Import

import { Dialog } from "@prismane/core";

Dialog component has the following inner components:

- Dialog.Header - The header container for the dialog.
- Dialog.Footer - The footer container for the dialog.

Usage

function Default() {
  const [open, setOpen] = useState(false);

  return (
    <>
      <Dialog open={open} onClose={() => setOpen(false)} closable>
        <Text>This is a simple dialog</Text>
      </Dialog>
      <Button
        onClick={() => {
          setOpen(!open);
        }}
      >
        {open ? "Close Dialog" : "Open Dialog"}
      </Button>
    </>
  );
}

Complex Dialog

When provided a Dialog.Header, if the Dialog is closable, then a close button is displayed, which can be used to close the dialog.

function Default() {
  const [open, setOpen] = useState(false);

  return (
    <>
      <Dialog w={fr(96)} open={open} onClose={() => setOpen(false)} closable>
        <Dialog.Header>
          <Text fw="bold">Account warning</Text>
        </Dialog.Header>
        <Text fs="sm">Your account has not been completed yet.</Text>
        <Dialog.Footer>
          <Button>Complete</Button>
        </Dialog.Footer>
      </Dialog>
      <Button
        onClick={() => {
          setOpen(!open);
        }}
      >
        {open ? "Close Dialog" : "Open Dialog"}
      </Button>
    </>
  );
}

Change Position

Dialog's position can be changed by providing a value to the position prop. Supported values are PrismanePositions

function Default() {
  const [open, setOpen] = useState(false);

  return (
    <>
      <Dialog
        position="right-end"
        animation="slide-right"
        w={fr(96)}
        open={open}
        onClose={() => setOpen(false)}
        closable
      >
        <Dialog.Header>
          <Text fw="bold">Account warning</Text>
        </Dialog.Header>
        <Text fs="sm">Your account has not been completed yet.</Text>
        <Dialog.Footer>
          <Button>Complete</Button>
        </Dialog.Footer>
      </Dialog>
      <Button
        onClick={() => {
          setOpen(!open);
        }}
      >
        {open ? "Close Dialog" : "Open Dialog"}
      </Button>
    </>
  );
}

Custom Animation

Dialog's animation can be changed by providing a value to the animation prop. Supported values are PrismaneAnimations

function Default() {
  const [open, setOpen] = useState(false);

  return (
    <>
      <Dialog
        animation="slide-down"
        w={fr(96)}
        open={open}
        onClose={() => setOpen(false)}
        closable
      >
        <Dialog.Header>
          <Text fw="bold">Account warning</Text>
        </Dialog.Header>
        <Text fs="sm">Your account has not been completed yet.</Text>
        <Dialog.Footer>
          <Button>Complete</Button>
        </Dialog.Footer>
      </Dialog>
      <Button
        onClick={() => {
          setOpen(!open);
        }}
      >
        {open ? "Close Dialog" : "Open Dialog"}
      </Button>
    </>
  );
}

API

Please refer to the documentation below for a comprehensive overview of all the available props and classes for the mentioned components.

- Dialog

Go BackContainer

Up NextDivider