Components
Overlay
ModalWrapper

ModalWrapper

Modal are surfaces that display content and actions on a single topic.

Import statement

import { ModalWrapper } from "@wfp/react"

Usage

Editable Example

import { ModalWrapper } from "@wfp/react";

<ModalWrapper
  buttonTriggerText="Open modal"
  primaryButtonText="Submit"
>
  Lorem ipsum dolor sit amet, consetetur sadipscing
  elitr, sed diam nonumy.
</ModalWrapper>;

Passive ModalWrapper example

Editable Example

import { ModalWrapper } from "@wfp/react";

<ModalWrapper
  buttonTriggerText="Open modal"
  primaryButtonText="Submit"
  passiveModal
>
  Lorem ipsum dolor sit amet, consetetur sadipscing
  elitr, sed diam nonumy.
</ModalWrapper>;

ModalWrapper with heading example

Editable Example

import { ModalWrapper } from "@wfp/react";

<ModalWrapper
  buttonTriggerText="Open modal"
  modalHeading="Modal heading"
  primaryButtonText="Submit"
  withHeader
>
  Lorem ipsum dolor sit amet, consetetur sadipscing
  elitr, sed diam nonumy.
</ModalWrapper>;

ModalWrapper with label example

Expand code

Editable Example

import { ModalWrapper } from "@wfp/react";

<ModalWrapper
  buttonTriggerText="Open modal"
  modalLabel="Modal label"
  modalHeading="Modal heading"
  primaryButtonText="Submit"
  withHeader
>
  Lorem ipsum dolor sit amet, consetetur sadipscing
  elitr, sed diam nonumy.
</ModalWrapper>;

Disabled ModalWrapper example

Expand code

Editable Example

import { ModalWrapper } from "@wfp/react";

<ModalWrapper
  buttonTriggerText="Open modal"
  modalLabel="Modal label"
  modalHeading="Modal heading"
  primaryButtonText="Submit"
  disabled
>
  Lorem ipsum dolor sit amet, consetetur sadipscing
  elitr, sed diam nonumy.
</ModalWrapper>;

On this page

References