Delete

The Delete component provides a confirmation dialog for destructive actions. It supports button, icon, menu, and popover trigger modes, with optional match-based secondary confirmation.

Button Mode

Renders as a red outline button by default. Clicking opens a confirmation modal.

<TDelete label="Delete Item" @delete="onDelete" />

Icon Mode

Set display-type="icon" to render as an icon-only button, suitable for compact layouts.

<TDelete display-type="icon" @delete="onDelete" />

Menu Mode

Set display-type="menu" to render as a menu item, ideal for dropdown actions.

<TDelete display-type="menu" label="Delete User" @delete="onDelete" />

Popover Quick Confirm

Set display-type="popover" to show a lightweight popover confirmation near the button, without opening a full modal.

<TDelete label="Delete" display-type="popover" @delete="onDelete" />

Disabled State

Set disabled to prevent the delete action.

<TDelete label="Cannot delete" disabled />
<TDelete display-type="icon" disabled />

Secondary Confirmation (Match)

Set the match prop to require the user to type a specific word before confirming, preventing accidental deletions.

<TDelete label="Delete important data" match="DELETE" @delete="onDelete" />

Loading State

Use the loading prop to show a spinner on the confirm button during async delete operations.

<TDelete label="Deleting" :loading="true" @delete="onDelete" />

Localization (Locale)

Pass a locale object to customize all text in the modal and popover. Unset fields fall back to English defaults.

<TDelete
  label="删除项目"
  :locale="{
    confirmTitle: '确认删除',
    confirmMessage: '确定要执行此操作吗？',
    confirmLabel: '确认',
    cancelLabel: '取消',
  }"
  @delete="onDelete"
/>

API

Props

Prop	Description	Type	Default
label	Button / menu text	string	'Delete'
size	Icon size (icon mode only)	number	24
disabled	Disable the delete action	boolean	false
displayType	Display style	'button' | 'icon' | 'menu' | 'popover'	'button'
match	Secondary confirmation text	string	undefined
loading	Loading state	boolean	false
locale	Localization object	DeleteLocale	{}

DeleteLocale

Field	Description	Default Value
confirmTitle	Modal title	'Confirm Deletion'
confirmMessage	Confirmation message	'Are you sure you want to proceed?'
irreversible	Irreversible warning	'This action cannot be undone.'
popoverConfirm	Popover confirmation prefix	'Confirm {label}?'
confirmLabel	Confirm button text	'Confirm'
cancelLabel	Cancel button text	'Cancel'
typeToConfirm	Match prompt (supports HTML)	'Type <span class="fw-bold text-danger">{match}</span> to confirm'

Events

Event	Description	Parameters
delete	Emitted when user confirms delete	—