# ConfirmationDialog

**Kind:** Class

A styled modal dialog component that prompts the user to confirm or cancel an action.

[[ Story id="confirmationdialog--example" title="Confirmation dialog example" ]]

By default, this component will focus the "Confirm" button on mount, so that pressing
the Enter key will confirm the action.

---

## ConfirmationDialogProps

**Kind:** Interface

Props for the `ConfirmationDialog` component. Also accepts:
* `DialogStyleProps`

### Properties

#### `backgroundClassName?`

Type: `undefined | string`

Extra `className`s to apply to the background element, separated by spaces.

#### `backgroundStyle?`

Type: `React.CSSProperties`

Extra styles to apply to the background element.

#### `body?`

Type: `React.ReactNode | string`

The body of the dialog. When it’s a string it will automatically be wrapped in a Text component.

#### `cancelButtonText?`

Type: `undefined | string`

The label for the cancel button. Defaults to 'Cancel'.

#### `className?`

Type: `undefined | string`

Extra `className`s to apply to the dialog element, separated by spaces.

#### `confirmButtonText?`

Type: `undefined | string`

The label for the confirm button. Defaults to 'Confirm'.

#### `isCancelButtonDisabled?`

Type: `undefined | false | true`

Whether the cancel button can be interacted with. Defaults to `false`.

#### `isConfirmActionDangerous`

Type: `boolean`

Whether the action is dangerous (potentially destructive or not easily reversible). Defaults to `false`.

#### `isConfirmButtonDisabled?`

Type: `undefined | false | true`

Whether the confirm button can be interacted with. Defaults to `false`.

#### `onCancel`

Type: `object`

Cancel button event handler. Handles click events and Space/Enter keypress events.

#### `onConfirm`

Type: `object`

Confirm button event handler. Handles click events and Space/Enter keypress events.

#### `style?`

Type: `React.CSSProperties`

Extra styles to apply to the dialog element.

#### `title`

Type: `string`

The title of the dialog.