components

Dialog (code)

To draw attention of the user to a dedicated piece of content, you can use a Dialog.

import { Dialog } from '@mediahuis/chameleon-react'

() => {
  const [dialogShown, setDialogShown] = React.useState(false);

  return (
    <>
      <Button onClick={() => setDialogShown(true)}>Open dialog</Button>
      <Dialog show={dialogShown} onClose={() => setDialogShown(false)}>
        <Paragraph>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean varius
          euismod semper. Nulla lorem lorem, aliquam non neque in, dictum
          eleifend tortor. Suspendisse potenti. Quisque luctus vel ante quis
          vulputate. Nulla a iaculis tellus. Quisque quis neque eu nisi euismod.
        </Paragraph>
      </Dialog>
    </>
  );
};

() => {
  const [dialogShown, setDialogShown] = React.useState(false);
  return (
    <>
      <Button onClick={() => setDialogShown(true)}>Open dialog</Button>
      <Dialog show={dialogShown} onClose={() => setDialogShown(false)}>
        <Paragraph>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean varius
          euismod semper. Nulla lorem lorem, aliquam non neque in, dictum
          eleifend tortor. Suspendisse potenti. Quisque luctus vel ante quis
          vulputate. Nulla a iaculis tellus. Quisque quis neque eu nisi euismod.
        </Paragraph>
      </Dialog>
    </>
  );
};

Props

Name	Type	Default	Required	Description
accessibilityLabelCloseButton	String	'Close'	-	The A11Y label set in the close button
children	Node	-	-	The content of the Dialog
closeOnBackdropClick	Boolean	true	-	User can hide the dialog by clicking on the backdrop.
closeOnEscape	Boolean	true	-	User can hide the dialog by pressing `Escape`.
footer	Node	-	-	Contents of the footer
headerHidden	Boolean	false	-	Hide the Dialogs header
lockBodyOnScroll	Boolean	true	-	User can't scroll on body when the dialog is visible.
onClose	Function	-	-	The close event is triggered
show	Boolean	false	-	Show or hide the Dialog

Header hidden

default: false

If you don't want a header at the top of the dialog, you can set the headerHidden prop. Hiding the header, will also remove the x button that can be used to close the modal. If you want an uncloseable modal, you can combine this with closeOnBackdropClick and closeOnEscape.

import { Dialog } from '@mediahuis/chameleon-react'

() => {
  const [dialogShown, setDialogShown] = React.useState(false);

  return (
    <>
      <Button onClick={() => setDialogShown(true)}>
        Open dialog without header
      </Button>
      <Dialog
        show={dialogShown}
        onClose={() => setDialogShown(false)}
        headerHidden={true}
      >
        <Paragraph>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean varius
          euismod semper. Nulla lorem lorem, aliquam non neque in, dictum
          eleifend tortor. Suspendisse potenti. Quisque luctus vel ante quis
          vulputate. Nulla a iaculis tellus. Quisque quis neque eu nisi euismod.
        </Paragraph>
      </Dialog>
    </>
  );
};

() => {
  const [dialogShown, setDialogShown] = React.useState(false);
  return (
    <>
      <Button onClick={() => setDialogShown(true)}>
        Open dialog without header
      </Button>
      <Dialog
        show={dialogShown}
        onClose={() => setDialogShown(false)}
        headerHidden={true}
      >
        <Paragraph>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean varius
          euismod semper. Nulla lorem lorem, aliquam non neque in, dictum
          eleifend tortor. Suspendisse potenti. Quisque luctus vel ante quis
          vulputate. Nulla a iaculis tellus. Quisque quis neque eu nisi euismod.
        </Paragraph>
      </Dialog>
    </>
  );
};

If you want a footer at the bottom of the dialog, you can set the footer prop.

import { Dialog } from '@mediahuis/chameleon-react'

() => {
  const [dialogShown, setDialogShown] = React.useState(false);

  return (
    <>
      <Button onClick={() => setDialogShown(true)}>
        Open dialog with footer
      </Button>
      <Dialog
        show={dialogShown}
        onClose={() => setDialogShown(false)}
        footer={
          <>
            <Button
              size="small"
              appearance="secondary"
              onClick={() => setDialogShown(false)}
            >
              Decline
            </Button>
            <Button size="small" onClick={() => alert('Accept')}>
              Accept
            </Button>
          </>
        }
      >
        <Paragraph>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean varius
          euismod semper. Nulla lorem lorem, aliquam non neque in, dictum
          eleifend tortor. Suspendisse potenti. Quisque luctus vel ante quis
          vulputate. Nulla a iaculis tellus. Quisque quis neque eu nisi euismod.
        </Paragraph>
      </Dialog>
    </>
  );
};

() => {
  const [dialogShown, setDialogShown] = React.useState(false);
  return (
    <>
      <Button onClick={() => setDialogShown(true)}>
        Open dialog with footer
      </Button>
      <Dialog
        show={dialogShown}
        onClose={() => setDialogShown(false)}
        footer={
          <>
            <Button
              size="small"
              appearance="secondary"
              onClick={() => setDialogShown(false)}
            >
              Decline
            </Button>
            <Button size="small" onClick={() => alert('Accept')}>
              Accept
            </Button>
          </>
        }
      >
        <Paragraph>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean varius
          euismod semper. Nulla lorem lorem, aliquam non neque in, dictum
          eleifend tortor. Suspendisse potenti. Quisque luctus vel ante quis
          vulputate. Nulla a iaculis tellus. Quisque quis neque eu nisi euismod.
        </Paragraph>
      </Dialog>
    </>
  );
};

Ways to close

closeOnBackdropClick default: true

closeOnEscape default: true

By default, the dialog can be closed by pressing the x button, by hitting the escape key or by clicking the backdrop. You can granularly disable these options.

import { Dialog } from '@mediahuis/chameleon-react'

() => {
  const [dialogShown, setDialogShown] = React.useState(false);

  return (
    <>
      <Button onClick={() => setDialogShown(true)}>
        Open dialog and only close it with the button
      </Button>
      <Dialog
        show={dialogShown}
        onClose={() => setDialogShown(false)}
        closeOnBackdropClick={false}
        closeOnEscape={false}
        lockBodyOnScroll={false}
      >
        <Paragraph>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean varius
          euismod semper. Nulla lorem lorem, aliquam non neque in, dictum
          eleifend tortor. Suspendisse potenti. Quisque luctus vel ante quis
          vulputate. Nulla a iaculis tellus. Quisque quis neque eu nisi euismod.
        </Paragraph>
      </Dialog>
    </>
  );
};

() => {
  const [dialogShown, setDialogShown] = React.useState(false);
  return (
    <>
      <Button onClick={() => setDialogShown(true)}>
        Open dialog and only close it with the button
      </Button>
      <Dialog
        show={dialogShown}
        onClose={() => setDialogShown(false)}
        closeOnBackdropClick={false}
        closeOnEscape={false}
        lockBodyOnScroll={false}
      >
        <Paragraph>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean varius
          euismod semper. Nulla lorem lorem, aliquam non neque in, dictum
          eleifend tortor. Suspendisse potenti. Quisque luctus vel ante quis
          vulputate. Nulla a iaculis tellus. Quisque quis neque eu nisi euismod.
        </Paragraph>
      </Dialog>
    </>
  );
};

Lock body on scroll

default: true

When a Dialog is open, scrolling the body is disabled. If you want a user to still be able to scroll the body when a Dialog is open, you can disable this prop.

import { Dialog } from '@mediahuis/chameleon-react'

() => {
  const [dialogShown, setDialogShown] = React.useState(false);

  return (
    <>
      <Button onClick={() => setDialogShown(true)}>
        Open dialog and keep scrolling
      </Button>
      <Dialog
        show={dialogShown}
        onClose={() => setDialogShown(false)}
        lockBodyOnScroll={false}
      >
        <Paragraph>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean varius
          euismod semper. Nulla lorem lorem, aliquam non neque in, dictum
          eleifend tortor. Suspendisse potenti. Quisque luctus vel ante quis
          vulputate. Nulla a iaculis tellus. Quisque quis neque eu nisi euismod.
        </Paragraph>
      </Dialog>
    </>
  );
};

() => {
  const [dialogShown, setDialogShown] = React.useState(false);
  return (
    <>
      <Button onClick={() => setDialogShown(true)}>
        Open dialog and keep scrolling
      </Button>
      <Dialog
        show={dialogShown}
        onClose={() => setDialogShown(false)}
        lockBodyOnScroll={false}
      >
        <Paragraph>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean varius
          euismod semper. Nulla lorem lorem, aliquam non neque in, dictum
          eleifend tortor. Suspendisse potenti. Quisque luctus vel ante quis
          vulputate. Nulla a iaculis tellus. Quisque quis neque eu nisi euismod.
        </Paragraph>
      </Dialog>
    </>
  );
};

Dialog (code)

Props

Header hidden

Footer

Ways to close

Lock body on scroll