# components/ConfirmDialog (zidane-ui)

Import: `import { … } from 'zidane-ui'`. Source: [ui/src/components/ConfirmDialog.tsx](https://github.com/Tahul/zidane/blob/main/ui/src/components/ConfirmDialog.tsx).

## Components

### `ConfirmDialog`

Component.

Renders a short yes / no `alertdialog` with a title, an optional message, a Cancel button
and a confirm button. Focus starts on confirm, or on Cancel when `destructive`, so a stray
Enter never confirms a deletion. It draws the panel only; the host puts it on a modal
layer and resolves the answer.

```ts
function ConfirmDialog(props: ConfirmDialogProps): Element
```

**Parameters**

- `props` (`ConfirmDialogProps`): [`ConfirmOptions`](https://zidane.si/docs/reference/ui-components-confirm-dialog.md#ConfirmOptions) plus the callbacks below.

**Returns** `Element`

**Props**

- `cancelLabel?` (`string`, from `ConfirmOptions`): Text of the cancel button. Defaults to the `cancel` label from [`useLabels`](https://zidane.si/docs/reference/ui-labels.md#useLabels).
- `className?` (`string`): Extra classes on the dialog panel, such as the host layer's entry animation class.
- `confirmLabel?` (`string`, from `ConfirmOptions`): Text of the confirm button. Defaults to the `confirm` label from [`useLabels`](https://zidane.si/docs/reference/ui-labels.md#useLabels).
- `destructive?` (`boolean`, from `ConfirmOptions`): Danger-toned confirm button; focus starts on Cancel.
- `message?` (`ReactNode`, from `ConfirmOptions`): Body text under the title. When set, it describes the dialog.
- `onCancel` (`() => void`): Called when the Cancel button is pressed.
- `onConfirm` (`() => void`): Called when the confirm button is pressed.
- `style?` (`CSSProperties`): Inline styles on the dialog panel, merged after the component's own.
- `title` (`string`, from `ConfirmOptions`): Heading of the dialog. It names the `alertdialog`.
- `titleId?` (`string`): The title's id, when a host layer's `aria-labelledby` names it; unique by default.

Source: [ui/src/components/ConfirmDialog.tsx:59](https://github.com/Tahul/zidane/blob/main/ui/src/components/ConfirmDialog.tsx#L59)

## Constants

### `CONFIRM_TITLE_ID`

Constant, deprecated.

**Deprecated.** Titles get a unique id (two dialogs can be open at once).
A host layer that is still labelled by this id passes it back as `titleId`.

The fixed id that earlier versions gave the dialog title.

```ts
const CONFIRM_TITLE_ID = 'zg-confirm-title'
```

Source: [ui/src/components/ConfirmDialog.tsx:35](https://github.com/Tahul/zidane/blob/main/ui/src/components/ConfirmDialog.tsx#L35)

## Interfaces

### `ConfirmDialogProps`

Interface.

Props for [`ConfirmDialog`](https://zidane.si/docs/reference/ui-components-confirm-dialog.md#ConfirmDialog): [`ConfirmOptions`](https://zidane.si/docs/reference/ui-components-confirm-dialog.md#ConfirmOptions) plus the callbacks.

```ts
interface ConfirmDialogProps extends ConfirmOptions
```

**Properties**

- `cancelLabel?` (`string`, from `ConfirmOptions`): Text of the cancel button. Defaults to the `cancel` label from [`useLabels`](https://zidane.si/docs/reference/ui-labels.md#useLabels).
- `className?` (`string`): Extra classes on the dialog panel, such as the host layer's entry animation class.
- `confirmLabel?` (`string`, from `ConfirmOptions`): Text of the confirm button. Defaults to the `confirm` label from [`useLabels`](https://zidane.si/docs/reference/ui-labels.md#useLabels).
- `destructive?` (`boolean`, from `ConfirmOptions`): Danger-toned confirm button; focus starts on Cancel.
- `message?` (`ReactNode`, from `ConfirmOptions`): Body text under the title. When set, it describes the dialog.
- `onCancel` (`() => void`): Called when the Cancel button is pressed.
- `onConfirm` (`() => void`): Called when the confirm button is pressed.
- `style?` (`CSSProperties`): Inline styles on the dialog panel, merged after the component's own.
- `title` (`string`, from `ConfirmOptions`): Heading of the dialog. It names the `alertdialog`.
- `titleId?` (`string`): The title's id, when a host layer's `aria-labelledby` names it; unique by default.

Source: [ui/src/components/ConfirmDialog.tsx:38](https://github.com/Tahul/zidane/blob/main/ui/src/components/ConfirmDialog.tsx#L38)

### `ConfirmOptions`

Interface.

Content of a [`ConfirmDialog`](https://zidane.si/docs/reference/ui-components-confirm-dialog.md#ConfirmDialog): its title, message, button labels and tone.

```ts
interface ConfirmOptions
```

**Properties**

- `cancelLabel?` (`string`): Text of the cancel button. Defaults to the `cancel` label from [`useLabels`](https://zidane.si/docs/reference/ui-labels.md#useLabels).
- `confirmLabel?` (`string`): Text of the confirm button. Defaults to the `confirm` label from [`useLabels`](https://zidane.si/docs/reference/ui-labels.md#useLabels).
- `destructive?` (`boolean`): Danger-toned confirm button; focus starts on Cancel.
- `message?` (`ReactNode`): Body text under the title. When set, it describes the dialog.
- `title` (`string`): Heading of the dialog. It names the `alertdialog`.

Source: [ui/src/components/ConfirmDialog.tsx:16](https://github.com/Tahul/zidane/blob/main/ui/src/components/ConfirmDialog.tsx#L16)