A warning modal component displays a modal when a user tries to perform a risky action, which asks them to confirm or cancel the action.
Examples
Basic warning modal
A basic warning modal is triggered when a user tries to perform an action that is deemed risky.
You can customize the contents of the modal to fit your use cases. To adjust the text in the modal, pass your desired title to title and your message to the <WarningModal> component. To customize the action buttons in the modal, use onConfirm and onClose.
For further customization, you can utilize all properties of the modal component, with the exception of ref.
Warning modal with a custom button variant
You can apply custom variant to a warning modal's confirmation button.
Warning modal with a checkbox
To confirm that a user wishes to initiate a selected action, you can add a checkbox to a warning modal.
Warning modal with a text confirmation
To ensure the user intentionally initiates a selected action, you can add a confirmation text input.
Props
WarningModal
| Name | Type | Default | Description |
|---|---|---|---|
| cancelButtonLabel | React.ReactNode | 'Cancel' | Custom label for the cancel action button |
| checkboxLabel | ReactNode | 'I understand that this action cannot be undone' | Custom checkbox label |
| confirmationInputLabel | ReactNode | <>Type <strong>{confirmationText} </strong> to confirm the action:</> | Label for the text confirmation input |
| confirmationInputProps | TextInputProps | Confirmation text input props | |
| confirmationText | string | Text the user should type to confirm selection when using confirmation input | |
| confirmButtonLabel | React.ReactNode | 'Confirm' | Custom label for the confirm action button |
| confirmButtonVariant | ButtonVariant | ButtonVariant.primary | Visual variant of the confirm button |
| onConfirm | () => void | Callback for the confirm action button. | |
| ouiaId | string | number | 'WarningModal' | Custom OUIA ID |
| titleIconVariant | No type info | 'warning' | |
| variant | No type info | ModalVariant.small | |
| withCheckbox | boolean | false | Whether modal requires a checkbox before confirming |
