Skip to main content

Getting Started

Basic Confirmation Action​

A dropdown with a single confirmation action that submits to a form action path:

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

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

Clicking "Delete Item" opens a confirmation dialog. On confirm, it POSTs to ?/delete.

Form Action​

For actions that require user input, use ActionButton.Form with a @repo/form superform:

<script lang="ts">
  import { ActionButton } from '@repo/actions'
  import { FormField } from '@repo/form'
  import { importForm, importSchema } from './import.remote'
</script>

<ActionButton.Root>
  <ActionButton.Item>
    <ActionButton.Form label="Import Data" form={importForm} enctype="multipart/form-data" action="?/import">
      <FormField.Simple accessor="file" label="CSV File">
        {#snippet children({ props })}
          <FormField.FileField bind:value={$formData.file} accept="text/csv" {...props} />
        {/snippet}
      </FormField.Simple>
    </ActionButton.Form>
  </ActionButton.Item>
</ActionButton.Root>

Remote Action​

For actions that submit to a remote function instead of a form action path:

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

<ActionButton.Root>
  <ActionButton.Item>
    <ActionButton.Remote label="Generate Report" form={generateReport} />
  </ActionButton.Item>
</ActionButton.Root>

Multiple Actions​

Combine different action types in a single dropdown:

<ActionButton.Root>
  <ActionButton.Item>
    <ActionButton.Confirmation action="?/generate" label="Generate Tasks" invalidateAll />
  </ActionButton.Item>
  <ActionButton.Item>
    <ActionButton.Remote label="Sync Data" form={syncForm} />
  </ActionButton.Item>
  <ActionButton.Item>
    <ActionButton.Simple label="Preview">
      <p>Custom content here.</p>
    </ActionButton.Simple>
  </ActionButton.Item>
</ActionButton.Root>

Next Steps​