Skip to content
Home

Modal

Info
Demos
Properties
Events

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>