# Confirm Dialog

> Asks to confirm or cancel an action.

## Examples

### Destructive

```vue
<script setup lang="ts">
const open = ref(false);
const toast = useToast();
</script>

<template>
  <UiButton variant="danger" @click="open = true">Delete project</UiButton>

  <UiConfirmDialog
    v-model:open="open"
    title="Delete this project?"
    description="Its files and history are removed for everyone. This can't be undone."
    confirm-text="Delete"
    danger
    @confirm="toast.error('Project deleted')"
    @cancel="toast.info('Kept the project')"
  />
</template>
```

### Async action

With `keep-open`, Confirm doesn't close the dialog. Set `loading` while your action runs, then close it yourself; it can't be cancelled while loading.

```vue
<script setup lang="ts">
const open = ref(false);
const deleting = ref(false);
const toast = useToast();

// Stand-in for a delete request.
async function remove() {
  deleting.value = true;
  await new Promise((resolve) => setTimeout(resolve, 1200));
  deleting.value = false;
  open.value = false;
  toast.success("Branch deleted");
}
</script>

<template>
  <UiButton variant="danger" @click="open = true">Delete branch</UiButton>

  <UiConfirmDialog
    v-model:open="open"
    title="Delete feature/login?"
    description="Unmerged commits on it are lost."
    confirm-text="Delete"
    danger
    keep-open
    :loading="deleting"
    @confirm="remove"
  >
    <template #spinner><span class="spinner" /></template>
  </UiConfirmDialog>
</template>
```

## API

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `title` | `string` | — | Heading, which names the dialog. |
| `description` | `string` | — | Supporting text, announced as the dialog's description. |
| `confirmText` | `string` | — | Confirm button text. Defaults to the `confirm` translation. |
| `cancelText` | `string` | — | Cancel button text. Defaults to the `cancel` translation. |
| `danger` | `boolean` | `false` | Destructive action: a danger-styled confirm, and Cancel takes initial focus. |
| `loading` | `boolean` | `false` | The confirmed action is running: Confirm shows it, and the dialog can't be cancelled. |
| `keepOpen` | `boolean` | `false` | Stay open after Confirm, e.g. while `loading`; close it by setting `open` to false. |
| `open` | `boolean` | `false` | Whether the dialog is open. |

| Event | Payload | Description |
| --- | --- | --- |
| `cancel` | `[]` | Cancelled by the button or Escape. |
| `confirm` | `[]` | The confirm button was pressed. |
| `update:open` | `[value: boolean]` | `v-model:open` update. |

| Slot | Props | Description |
| --- | --- | --- |
| `default` | — | Extra body content. |
| `spinner` | — | The Confirm button's spinner while `loading`. |

## Styling

- Parts (`[data-part="…"]`): `button`, `button-spinner`, `button-label`, `dialog`, `dialog-panel`, `dialog-header`, `dialog-header-text`, `dialog-title`, `dialog-description`, `dialog-close`, `dialog-body`, `dialog-footer`
- State attributes: `data-button-variant`, `data-button-size`, `data-button-full-width`, `data-button-disabled`, `data-button-loading`, `data-dialog-size`, `data-dialog-flush`

## Keyboard

| Keys     | Action                    |
| -------- | ------------------------- |
| `Escape` | Cancel                    |
| `Tab`    | Cycle between the buttons |

## Accessibility

- The backdrop doesn't close it.
- With `danger`, Cancel gets initial focus.