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 label="Generate Tasks" form={generateTasksForm} />
</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
- Remote Actions -- submit to remote functions
- Form Fields -- actions with generated form fields