ModalConfirm

ModalConfirm is a convenience wrapper on top of Modal. It is intended to use for showing confirmation dialogs.

Import

import { ModalConfirm } from '@contentful/f36-components';
// or
import { ModalConfirm } from '@contentful/f36-modal';

Examples

Basic

ModalConfirm has 3 different intents: positive, primary and negative. Changing this property changes the variant of the primary button.

Here is an example of a modal with a positive intent:

Open in Playground
function ModalConfirmExample() {
  const [isShown, setShown] = useState(false);
  return (
    <>
      <Button variant="secondary" onClick={() => setShown(true)}>
        Delete entry
      </Button>
      <ModalConfirm
        intent="positive"
        isShown={isShown}
        onCancel={() => {
          setShown(false);
        }}
        onConfirm={() => {
          setShown(false);
        }}
      >
        <Text>Do you really want to publish this entry?</Text>
      </ModalConfirm>
    </>
  );
}
function ModalConfirmExample() {
  const [isShown, setShown] = useState(false);
  return (
    <>
      <Button variant="secondary" onClick={() => setShown(true)}>
        Delete entry
      </Button>
      <ModalConfirm
        intent="positive"
        isShown={isShown}
        onCancel={() => {
          setShown(false);
        }}
        onConfirm={() => {
          setShown(false);
        }}
      >
        <Text>Do you really want to publish this entry?</Text>
      </ModalConfirm>
    </>
  );
}
Hide source

Changing button labels

You can change action button labels by using cancelLabel and confirmLabel.

Open in Playground
function ModalConfirmPromptExample() {
  const onArchive = () => {
    ModalLauncher.open(({ isShown, onClose }) => {
      return (
        <ModalConfirm
          title="This entry is linked in other entries"
          intent="negative"
          isShown={isShown}
          onCancel={() => {
            onClose(false);
          }}
          onConfirm={() => {
            onClose(true);
          }}
          confirmLabel="Archive entry anyway"
          cancelLabel="Cancel"
        >
          <Text>
            There are 2 other entries that link to this entry. If you archive
            it, your app(s) might break.
          </Text>
        </ModalConfirm>
      );
    }).then((result) => {
      if (result === true) {
        alert('archived');
      }
    });
  };

  return (
    <Button variant="negative" startIcon={<ArchiveIcon />} onClick={onArchive}>
      Archive entry
    </Button>
  );
}
function ModalConfirmPromptExample() {
  const onArchive = () => {
    ModalLauncher.open(({ isShown, onClose }) => {
      return (
        <ModalConfirm
          title="This entry is linked in other entries"
          intent="negative"
          isShown={isShown}
          onCancel={() => {
            onClose(false);
          }}
          onConfirm={() => {
            onClose(true);
          }}
          confirmLabel="Archive entry anyway"
          cancelLabel="Cancel"
        >
          <Text>
            There are 2 other entries that link to this entry. If you archive
            it, your app(s) might break.
          </Text>
        </ModalConfirm>
      );
    }).then((result) => {
      if (result === true) {
        alert('archived');
      }
    });
  };

  return (
    <Button variant="negative" startIcon={<ArchiveIcon />} onClick={onArchive}>
      Archive entry
    </Button>
  );
}
Hide source

Changing sizes

There are 4 different sizes for modals: small, medium, large, fullWidth. Pick a size based on the amount of content you have to present in them.

ModalConfirm behavior is exacly the same as Modal. Please, refer to Modal documentation for code example.

Using ModalLauncher

When you want to open a modal from a function (outside of React component code), use ModalLauncher.

Props (API reference)

• Name

  children(required)

  ReactNode
• Name

  isShown(required)

  Description

  When true, the dialog is shown.

  false

  true
• Name

  onCancel(required)

  Description

  Function that will be called when the cancel button is clicked. This does not close the ModalConfirm.

  (event: MouseEvent<Element, MouseEvent> | KeyboardEvent<Element>) => void
• Name

  onConfirm(required)

  Description

  Function that will be called when the confirm button is clicked. This does not close the ModalConfirm.

  () => void
• Name

  allowHeightOverflow

  Description

  Are modals higher than viewport allowed

  false

  true

  Default

  false
• Name

  cancelLabel

  Description

  Label of the cancel button

  string

  false

  Default

  Cancel
• Name

  cancelTestId

  string

  Default

  cf-ui-modal-confirm-cancel-button
• Name

  confirmLabel

  Description

  Label of the confirm button

  string

  false

  Default

  Confirm
• Name

  confirmTestId

  string

  Default

  cf-ui-modal-confirm-confirm-button
• Name

  initialFocusRef

  Description

  Optional property to set initial focus

  RefObject<HTMLElement>
• Name

  intent

  Description

  The intent of the ModalConfirm. Used for the Button.

  "primary"

  "positive"

  "negative"

  Default

  positive
• Name

  isConfirmDisabled

  Description

  When true, the confirm button is set to disabled.

  false

  true

  Default

  false
• Name

  isConfirmLoading

  Description

  When true, the confirm button is set to loading.

  false

  true

  Default

  false
• Name

  modalContentProps

  Description

  Optional props to override ModalContent behaviour

  Partial<ModalContentProps>
• Name

  modalControlsProps

  Description

  Optional props to override ModalControl behaviour

  Partial<ModalControlsProps>
• Name

  modalHeaderProps

  Description

  Optional props to override ModalHeader behaviour

  Partial<ModalHeaderProps>
• Name

  shouldCloseOnEscapePress

  Description

  Boolean indicating if pressing the esc key should close the overlay.

  false

  true

  Default

  true
• Name

  shouldCloseOnOverlayClick

  Description

  Boolean indicating if clicking the overlay should close the overlay.

  false

  true

  Default

  true
• Name

  size

  Description

  Size of the modal window

  string

  number

  Default

  medium
• Name

  testId

  string

  Default

  cf-ui-modal-confirm
• Name

  title

  Description

  Modal title that is used in header

  string

  Default

  Are you sure?

Content guidelines

Please, refer to Modal documentation.

Accessibility

• When the modal opens, focus is trapped within it.
• When the modal opens, focus is automatically set to the Cancel button, or the element from initialFocusRef.
• When the modal closes, focus returns to the element that was focused before the modal activated.
• By default, clicking on the overlay closes the modal.
• By default, pressing Esc closes the modal.
• Scrolling is blocked on the elements behind the modal.