Remote Actions

ActionButton.Remote opens a dialog that submits to a remote function via TypedForm.Remote from @repo/form.

Basic Usage

<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>

With onSuccess Callback

<ActionButton.Remote
  label="Sync Data"
  form={syncForm}
  onSuccess={() => {
    console.log('synced')
  }}
/>

Props

Prop	Type	Description
label	string | Snippet	Trigger text or snippet
title	string	Optional dialog title, defaults to label
form	RemoteForm	Remote form from a *.remote.ts file
onSuccess	() => MaybePromise<unknown>	Callback after successful submission
children	Snippet	Optional form content inside the dialog

Additional props are forwarded to TypedForm.Remote.

With Form Content

Pass children to render fields inside the dialog:

<ActionButton.Remote label="Update Settings" form={updateSettingsForm}>
  <label>
    Threshold
    <input type="number" name="threshold" />
  </label>
</ActionButton.Remote>

Behavior

• Submits via TypedForm.Remote from @repo/form
• On submit: calls onSuccess, then closes dialog
• Renders "OK" and "Close" buttons automatically