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

<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.

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 prop to set another close handler, like a timeout for when the modal should close.

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