Skip to content

Demos

The following examples are to demonstrate the functionality of Modal. Please go to Drawer demos or Dialog demos for complete component demos.

Example

Code Editor
<Modal>
  <ExampleCard>
    <P>This is a Modal that you can use to make custom variations</P>
  </ExampleCard>
</Modal>

Open Modal by the state only

Use a custom trigger button and state handling by setting omitTriggerButton to Modal.

Code Editor
const Component = () => {
  const [modalIsActive, setModalState] = React.useState(false)
  return (
    <>
      <Button
        id="custom-triggerer"
        text="Custom trigger Button"
        on_click={() => setModalState((s) => !s)}
      />
      <Modal
        title="Modal Title"
        omit_trigger_button
        open_state={modalIsActive}
        labelled_by="custom-triggerer"
        on_close={() => setModalState(false)}
      >
        <ExampleCard>
          <P>This Modal was opened by a custom trigger button.</P>
        </ExampleCard>
      </Modal>
    </>
  )
}
render(<Component />)

Close Modal by handlers

Use the close_modal property to set another close handler, like a timeout for when the modal should close.

Code Editor
<Modal
  title="Auto close"
  triggerAttributes={{
    text: 'Click me',
  }}
  align_content="center"
  max_width="40rem"
  close_modal={(close) => {
    const timeout = setTimeout(close, 3e3)
    return () => clearTimeout(timeout)
  }}
>
  <ExampleCard>
    <P>This Modal will close in 3 seconds.</P>
  </ExampleCard>
</Modal>