ModalConfirm

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:

Hide code
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>
    </>
  );
}
Open in Playground

Changing button labels

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

Hide code
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>
  );
}
Open in Playground

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.

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.