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`	Trigger text
`icon`	`Component`	Optional trigger icon
`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

Basic Usage

With onSuccess Callback

Props

With Form Content

Behavior

On this page