KConfirmDialog

示例

Confirm Dialog

A confirmation dialog with confirm and cancel buttons, supporting danger styling and loading state.

Props

Name	Type	Default	Description
open	boolean	false	Whether the dialog is visible.
title	string	'Confirm'	Dialog title text.
message	string	''	Dialog description message.
confirmText	string	'Confirm'	Text for the confirm button.
cancelText	string	'Cancel'	Text for the cancel button.
variant	'danger' | 'default'	'default'	Visual variant. 'danger' styles the confirm button as destructive.
loading	boolean	false	Whether the confirm button is in a loading state.
disabled	boolean	false	Whether the confirm button is disabled.

Emits

Name	Parameters	Description
confirm	—	Fired when the confirm button is clicked.
cancel	—	Fired when the cancel button is clicked or the dialog is closed.
update:open	boolean	Emitted to control dialog visibility.

Slots

Name	Description
—	This component does not provide slots.

Basic Usage

<script setup>
import { ref } from 'vue'
import { KConfirmDialog } from '@kK-2004/ui-component'

const showConfirm = ref(false)

function handleConfirm() {
  // perform destructive action
  showConfirm.value = false
}
</script>

<template>
  <KConfirmDialog
    v-model:open="showConfirm"
    title="Delete item?"
    message="This action cannot be undone."
    variant="danger"
    confirm-text="Delete"
    @confirm="handleConfirm"
  />
</template>