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.

Mode custom

Use mode="custom" in the Modal component to create other components with overlay.

<Modal mode="custom">

  <ExampleCard>

    <P>

      This is a Modal mode 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.

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)}

        mode="custom"

      >

        <ExampleCard>

          <P>This Modal was opened by a custom trigger button.</P>

          </ExampleCard>

      </Modal>

    </>

  )

}

render(<Component />)

Close Modal by handlers

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

<Modal

  title="Auto close"

  trigger_text="Click me"

  align_content="center"

  max_width="40rem"

  close_modal={close => {

    const timeout = setTimeout(close, 3e3)

    return () => clearTimeout(timeout) 

  }}

  mode="custom"

>

  <ExampleCard>

    <P>This Modal will close in 3 seconds.</P>

  </ExampleCard>

</Modal>