Dialog

Displays a dialog with custom content that requires attention or provides additional information.

Usage

import { Dialog } from '@elegantui/atoms';

Basic Example

import { Button, Dialog } from '@elegantui/atoms';

export default function App() {
  const [open, setOpen] = React.useState(false);

  return (
    <>
      <Button style={{ marginTop: '1rem' }} onClick={() => setOpen(true)}>
        Open Dialog
      </Button>
      <Dialog open={open} dismissHandler={() => setOpen(false)}>
        <h2
          style={{
            marginTop: 0,
            fontWeight: 'bold',
            textTransform: 'uppercase',
            color: 'black'
          }}
        >
          Transactions
        </h2>
        <p style={{ marginTop: '0.5rem', color: 'teal' }}>
          A better way to send money
        </p>
      </Dialog>
    </>
  );
}

Open

Dialog component requires an open prop that will determine the open or close state of the dialog.

import { Button, Dialog } from '@elegantui/atoms';

export default function App() {
  const [open, setOpen] = React.useState(false);

  return (
    <Dialog open={open}>
      <h2>Transactions</h2>
    </Dialog>
  );
}

DismissHandler

Dialog component requires a callback function as a dismissHandler prop which is fired when the dialog component is dismissed.

import { Button, Dialog } from '@elegantui/atoms';

export default function App() {
  const [open, setOpen] = React.useState(false);

  return (
    <Dialog open={open} dismissHandler={() => setOpen(false)}>
      <h2>Transactions</h2>
    </Dialog>
  );
}

Title

Dialog component accepts an optional title prop which sets the title of the dialog.

import { Button, Dialog } from '@elegantui/atoms';

export default function App() {
  const [open, setOpen] = React.useState(false);

  return (
    <Dialog open={open} dismissHandler={() => setOpen(false)} title='My Dialog'>
      <h2>Transactions</h2>
    </Dialog>
  );
}

Disabling Dialog Dismissal on Esc

The dialog component is fully accessible and clicking outside the dialog component will dismiss it. We might want to disable this behavior in certain scenarios. To achieve this you can pass a disableCloseOnEsc prop.

import { Button, Dialog } from '@elegantui/atoms';

export default function App() {
  const [open, setOpen] = React.useState(false);

  return (
    <Dialog
      open={open}
      dismissHandler={() => setOpen(false)}
      title='My Dialog'
      disableCloseOnEsc
    >
      <h2>Transactions</h2>
    </Dialog>
  );
}

Disabling Dialog Close Button

The dialog component can also be dismissed by using the close button in the dialog title. We might want to disable this behavior in certain scenarios. To achieve this you can pass a disableCloseButton prop.

import { Button, Dialog } from '@elegantui/atoms';

export default function App() {
  const [open, setOpen] = React.useState(false);

  return (
    <Dialog
      open={open}
      dismissHandler={() => setOpen(false)}
      title='My Dialog'
      disableCloseButton
    >
      <h2>Transactions</h2>
    </Dialog>
  );
}

Sizes

Dialog component is available in four sizes.

import { Button, Dialog } from '@elegantui/atoms';

export default function App() {
  const [open, setOpen] = React.useState(false);

  return (
    <Dialog
      open={open}
      dismissHandler={() => setOpen(false)}
      title='My Dialog'
      disableCloseOnEsc
      size='sm' // 'md' || 'lg' || 'xl'
    >
      <h2>Transactions</h2>
    </Dialog>
  );
}

Available Props