Dialog

useful for helping users make decisions and to display critical information.

() => {
  const [isVisible, setVisible] = React.useState(false);

  return (
    <>
      <Button onClick={() => setVisible(true)}>open dialog</Button>
      <Dialog isVisible={isVisible} onClose={() => setVisible(false)}>
        im dialog
      </Dialog>
    </>
  );
};

() => {
  const [isVisible, setVisible] = React.useState(false);
  return (
    <>
      <Button onClick={() => setVisible(true)}>open dialog</Button>
      <Dialog isVisible={isVisible} onClose={() => setVisible(false)}>
        im dialog
      </Dialog>
    </>
  );
};

Props

Prop	Type	Description
`children`	`ReactNode`	The content to render
`role`	`dialog \| alertdialog`	The role to apply
`width`	`String`	The width of the dialog
`ariaLabel`	`String`	The accessibility text (W3C)
`isVisible`	`Boolean`	Whether it is visible or not
`onClose`	`Function`	A function to be called when on close

Examples

todo