Confirmation Actions

ActionButton.Confirmation opens a dialog with "OK" and "Close" buttons. On confirm, it submits a POST form to the specified action path.

Basic Usage

<script lang="ts">
  import { ActionButton } from '@repo/actions'
</script>

<ActionButton.Root>
  <ActionButton.Item>
    <ActionButton.Confirmation action="?/delete" label="Delete Record" invalidateAll />
  </ActionButton.Item>
</ActionButton.Root>

Props

Prop	Type	Description
label	string | Snippet	Trigger text or snippet
action	string	Form action path (e.g. ?/delete)
title	string	Optional dialog title, defaults to label
invalidateAll	boolean	Re-fetch all load functions on success
noEnhance	boolean	Disable SvelteKit use:enhance

With Custom Title

<ActionButton.Confirmation
  action="?/archive"
  label="Archive"
  title="Archive this project?"
  invalidateAll
/>

With Snippet Label

Use a snippet for richer trigger content:

<ActionButton.Confirmation action="?/generate" invalidateAll>
  {#snippet label()}
    <span class="text-red-500">Generate All</span>
  {/snippet}
</ActionButton.Confirmation>

Behavior

• Submits via method="POST" with SvelteKit use:enhance
• On success: closes dialog, shows a toast notification, optionally calls invalidateAll()
• Set noEnhance to skip use:enhance for standard form submission