Skip to content
Sancho UI
Toggle dark mode
Getting started
Built with ☕ by
Ben McMahen

Dialog

A dialog is useful for displaying infomation that commands the user's attention.

Sancho exports these components to create dialogs:

  • Dialog: Your basic dialog which includes a DialogHeader if provided a title.
  • DialogHeader: A standard header of a dialog, which includes a title and a close button.

Basic usage

View dialog
/** @jsx jsx */

function DialogExample() {
  const [open, setOpen] = React.useState(false);
  const theme = useTheme();

  return (
    <React.Fragment>
      <Button onPress={() => setOpen(true)}>View dialog</Button>
      <Dialog
        isOpen={open}
        onRequestClose={() => setOpen(false)}
        title="Dialog title"
      >
        <div css={{ padding: theme.spaces.lg }}>
          <Text>Dialog content</Text>
          <div
            css={{
              display: "flex",
              marginTop: theme.spaces.lg,
              justifyContent: "flex-end"
            }}
          >
            <Button intent="primary">Save</Button>
          </div>
        </div>
      </Dialog>
    </React.Fragment>
  );
}

Fullscreen mobile example

This option enables fullscreen on mobile devices, which is typically a better user experience.

View dialog
function DialogExample() {
  const [open, setOpen] = React.useState(false);
  const theme = useTheme();

  return (
    <React.Fragment>
      <Button onPress={() => setOpen(true)}>View dialog</Button>
      <Dialog
        mobileFullscreen
        isOpen={open}
        onRequestClose={() => setOpen(false)}
        title="Dialog title"
      >
        <div css={{ padding: theme.spaces.lg }}>
          <Text>Dialog content</Text>
          <div
            css={{
              display: "flex",
              marginTop: theme.spaces.lg,
              justifyContent: "flex-end"
            }}
          >
            <Button intent="primary">Save</Button>
          </div>
        </div>
      </Dialog>
    </React.Fragment>
  );
}

Without a title

When a title isn't provided, a header isn't added.

View Dialog
function DialogExample() {
  const [open, setOpen] = React.useState(false);
  const theme = useTheme();

  return (
    <React.Fragment>
      <Button onPress={() => setOpen(true)}>View Dialog</Button>
      <Dialog isOpen={open} onRequestClose={() => setOpen(false)}>
        <div css={{ padding: theme.spaces.lg }}>
          <Text>Dialog content</Text>
          <div
            css={{
              display: "flex",
              marginTop: theme.spaces.lg,
              justifyContent: "flex-end"
            }}
          >
            <Button intent="primary">Save</Button>
          </div>
        </div>
      </Dialog>
    </React.Fragment>
  );
}

API

Dialog
isOpen*boolean
Whether the dialog is showing
titlestring
An optional title. If set, a header will be added to your dialog.
mobileFullscreenboolean
Fill the entire screen on mobile devices
onRequestClose*() => void
A callback for closing the dialog.
children*ReactNode
The contents of the dialog
cssInterpolationWithTheme<any>
DialogHeader
title*string
The title of the header
onRequestClose() => void
An optional callback for closing the dialog. If set, a close button will be added to the header
cssInterpolationWithTheme<any>