UiPrompt

A ready-made confirmation dialog built on the modal, with a title, body, icon and confirm/cancel buttons. Emits confirm or close, and shows a loading state on the confirm button.

Ejemplos

Confirm an action

A destructive confirmation with a red confirm button.

<div>
  <UiButton variant="outline" color="red" @click="state.open = true">Delete account</UiButton>
  <UiPrompt
    :show="state.open"
    icon="mdi:alert-outline"
    title="Delete account?"
    body="Your data will be permanently removed."
    confirm-label="Delete"
    confirm-color="red"
    @confirm="state.open = false"
    @close="state.open = false"
  />
</div>

Rich body

Put markup in the default slot instead of the plain-text body prop.

<div>
  <UiButton variant="outline" @click="state.rb = true">Show details</UiButton>
  <UiPrompt :show="state.rb" title="Heads up" @close="state.rb = false" @confirm="state.rb = false">
    <p>This affects <strong>12</strong> items. Continue?</p>
  </UiPrompt>
</div>

Custom actions

Override the #actions slot for a bespoke set of buttons.

<div>
  <UiButton variant="outline" @click="state.ca = true">Export</UiButton>
  <UiPrompt :show="state.ca" title="Export options" @close="state.ca = false">
    Include results in the export?
    <template #actions>
      <UiButton variant="ghost" color="gray" @click="state.ca = false">Without</UiButton>
      <UiButton @click="state.ca = false">With results</UiButton>
    </template>
  </UiPrompt>
</div>

Props

Nombre	Tipo	Por defecto	Descripción
show	`boolean`	`false`	Whether the prompt is open.
title	`string`	`'Confirm'`	Heading text.
icon	`string`	`null`	Optional MDI icon.
body	`string`	`null`	Body text.
confirmLabel	`string`	`'Confirm'`	Confirm button label.
cancelLabel	`string`	`'Cancel'`	Cancel button label.
confirmColor	`string`	`'primary'`	Colour of the confirm button (and the header icon). `primarygrayredgreenamber`
loading	`boolean`	`false`	Show a spinner on confirm and block closing.
confirmOnEnter	`boolean`	`true`	Confirm when Enter is pressed.
fullscreenMobile	`boolean`	`false`	Fill the screen on mobile.
panelClass	`string`	`''`	Extra classes for the panel.

Eventos

Evento	Datos	Descripción
`confirm`	`void`	Emitted when the confirm button is pressed.
`close`	`void`	Emitted when cancelled or dismissed.

Slots

Slot	Descripción
`default`	Rich body content, replacing the plain-text body prop.
`actions`	Custom action buttons, replacing the default cancel/confirm pair.

Primeros pasos

Actions

Forms

Overlays

Feedback

Layout & display