This is version 4 beta of Forma 36Go back to last stable version 3
Forma 36

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

Code examples

Props

NameRequiredDefaultTypeDescription
isShownrequired
false
true
When true, the dialog is shown.
onCancelrequired(event: MouseEvent<Element, MouseEvent> | KeyboardEvent<Element>) => voidFunction that will be called when the cancel button is clicked. This does not close the ModalConfirm.
onConfirmrequired() => voidFunction that will be called when the confirm button is clicked. This does not close the ModalConfirm.
allowHeightOverflowfalse
false
true
Are modals higher than viewport allowed
cancelLabelCancel
string
false
Label of the cancel button
cancelTestIdcf-ui-modal-confirm-cancel-buttonstring
confirmLabelConfirm
string
false
Label of the confirm button
confirmTestIdcf-ui-modal-confirm-confirm-buttonstring
initialFocusRefRefObject<HTMLElement>Optional property to set initial focus
intentpositive
"primary"
"positive"
"negative"
The intent of the ModalConfirm. Used for the Button.
isConfirmDisabledfalse
false
true
When true, the confirm button is set to disabled.
isConfirmLoadingfalse
false
true
When true, the confirm button is set to loading.
modalContentPropsPartial<ModalContentProps>Optional props to override ModalContent behaviour
modalControlsPropsPartial<ModalControlsProps>Optional props to override ModalControl behaviour
modalHeaderPropsPartial<ModalHeaderProps>Optional props to override ModalHeader behaviour
shouldCloseOnEscapePresstrue
false
true
Boolean indicating if pressing the esc key should close the overlay.
shouldCloseOnOverlayClicktrue
false
true
Boolean indicating if clicking the overlay should close the overlay.
sizemedium
string
number
Size of the modal window
titleAre you sure?stringModal title that is used in header
childrenrequiredReactNode
testIdcf-ui-modal-confirmstring