Skip to main content

Getting Started

Basic Remote Action​

A dropdown with a single action that submits to a SvelteKit remote form:

<script lang="ts">
  import { generateTasksForm } from '$lib/domains/tasks/database/tasks.remote'
  import { ActionButton } from '@repo/actions'
</script>

<ActionButton.Root>
  <ActionButton.Item>
    <ActionButton.Remote form={generateTasksForm}>
      {#snippet label()}
        Generate Tasks
      {/snippet}
    </ActionButton.Remote>
  </ActionButton.Item>
</ActionButton.Root>

Clicking "Generate Tasks" opens a confirmation dialog. On OK, it submits the remote form.

With Form Fields​

For actions that require user input, pass a schema to ActionButton.Remote:

<script lang="ts">
  import { ActionButton } from '@repo/actions'
  import { importEmployeesForm } from './employees.remote'
  import { importEmployeesSchema } from './schemas'
</script>

<ActionButton.Root>
  <ActionButton.Item>
    <ActionButton.Remote label="Import Data" form={importEmployeesForm} schema={importEmployeesSchema} />
  </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.Remote label="Generate Tasks" form={generateTasksForm} />
  </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​