BasePopconfirm

"Are you sure?", asked beside the button that asked it.

Import it from rei-kit: import { BasePopconfirm } from 'rei-kit'

Open BasePopconfirm in the live documentation, where every prop below is a control you can change, in four materials and ten palettes.

Usage

<script setup lang="ts">
import { BaseButton, BasePopconfirm } from 'rei-kit'

function remove() {
  // …
}
</script>

<template>
  <BasePopconfirm
    message="This entry will be deleted."
    confirm-label="Delete"
    cancel-label="Cancel"
    @confirm="remove"
  >
    <template #trigger="{ props }">
      <BaseButton variant="danger" size="sm" v-bind="props">Delete</BaseButton>
    </template>
  </BasePopconfirm>
</template>

Props

Props
Prop	Type	Required or default	What it is for
`message`	`string`	yes	The question. Already translated.
`confirmLabel`	`string`	yes	The button that goes ahead, e.g. "Delete".
`cancelLabel`	`string`	yes	The button that does not, e.g. "Cancel".
`title`	`string`	''	A heading over the question, and the panel's accessible name.
`tone`	`'danger' \| 'primary'`	'danger'	The confirming button's variant.

About rei-kit

rei-kit is an accessible Vue 3 and Tailwind CSS 4 component library: 106 components, themed by role rather than by colour on three independent axes — ten WCAG-checked palettes, four materials and light or dark, each switched with one attribute. Typed, tested, SSR-safe, no runtime dependencies, MIT.

pnpm add rei-kit · npm · GitHub