Dialog

The Dialog component can be used to show a modal window on top of the main UI. When visible, it will trap focus and clicks to the underlying UI, which is the required behaviour for acceessibility.

Show dialog

function ExampleDialog({ close }) {
  return (
    <Dialog close={close} label="Example">
      <Row padding="medium" align="center" justify="space-between">
        <Span>Dark mode</Span>
        <DarkModeToggle />
      </Row>
    </Dialog>
  );
}

export function DialogTrigger() {
  const { open } = useDialog<void>(
    ({ close }) => <ExampleDialog close={close} />,
    { closeOnOutsideClick: true }
  );

  return <Button label="Show dialog" color={"positive"} onClick={() => open()} />;
}