ModalConfirm

View on Github

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:

Changing button labels

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

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)

Open in Storybook

Name

Type

Default

children
required
ReactNode

isShown
required
false
true

When true, the dialog is shown.

onCancel
required
(event: MouseEvent<Element, MouseEvent> | KeyboardEvent<Element>) => void

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

onConfirm
required
() => void

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

allowHeightOverflow
false
true

Are modals higher than viewport allowed

false
cancelLabel
string
false

Label of the cancel button

Cancel
cancelTestId
string

cf-ui-modal-confirm-cancel-button
confirmLabel
string
false

Label of the confirm button

Confirm
confirmTestId
string

cf-ui-modal-confirm-confirm-button
initialFocusRef
RefObject<HTMLElement>

Optional property to set initial focus

intent
"primary"
"positive"
"negative"

The intent of the ModalConfirm. Used for the Button.

positive
isConfirmDisabled
false
true

When true, the confirm button is set to disabled.

false
isConfirmLoading
false
true

When true, the confirm button is set to loading.

false
modalContentProps
Partial<ModalContentProps>

Optional props to override ModalContent behaviour

modalControlsProps
Partial<ModalControlsProps>

Optional props to override ModalControl behaviour

modalHeaderProps
Partial<ModalHeaderProps>

Optional props to override ModalHeader behaviour

shouldCloseOnEscapePress
false
true

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

true
shouldCloseOnOverlayClick
false
true

Boolean indicating if clicking the overlay should close the overlay.

true
size
string
number

Size of the modal window

medium
testId
string

cf-ui-modal-confirm
title
string

Modal title that is used in header

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.