ModalConfirm

StorybookGithub

stable

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

Code examples

Open in Playground
function ModalConfirmExample() {
  const [isShown, setShown] = React.useState(false);
  return (
    <div>
      <Button variant="negative" onClick={() => setShown(true)}>
        Delete something
      </Button>
      <ModalConfirm
        isShown={isShown}
        onCancel={() => {
          setShown(false);
        }}
        onConfirm={() => {
          setShown(false);
        }}
      >
        <Text>Do you want to confirm your action?</Text>
      </ModalConfirm>
    </div>
  );
}
function ModalConfirmExample() {
  const [isShown, setShown] = React.useState(false);
  return (
    <div>
      <Button variant="negative" onClick={() => setShown(true)}>
        Delete something
      </Button>
      <ModalConfirm
        isShown={isShown}
        onCancel={() => {
          setShown(false);
        }}
        onConfirm={() => {
          setShown(false);
        }}
      >
        <Text>Do you want to confirm your action?</Text>
      </ModalConfirm>
    </div>
  );
}
Hide source

Props

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