Modal

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>