Action Button

A button that performs an action when clicked and optionally asks for user confirmation.

<script lang="ts">
  import { ActionButton } from "$lib/components/components/action-button";
 
  const remoteFunc = async () => {
    // Simulate a remote function
    await new Promise((res) => setTimeout(res, 1000));
    return { error: false };
  };
</script>
 
<ActionButton action={remoteFunc} requireAreYouSure>Do action</ActionButton>

Installation

pnpm dlx shadcn-svelte@latest add https://wds-shadcn-registry-svelte.netlify.app/registry/action-button.json

npx shadcn-svelte@latest add https://wds-shadcn-registry-svelte.netlify.app/registry/action-button.json

bun x shadcn-svelte@latest add https://wds-shadcn-registry-svelte.netlify.app/registry/action-button.json

yarn shadcn-svelte@latest add https://wds-shadcn-registry-svelte.netlify.app/registry/action-button.json

Usage

<script lang="ts">
	import { ActionButton } from '$lib/components/action-button';
	import { updateSettings } from '$lib/actions/settings';
 
	const settings = { name: 'Kyle' };
</script>
 
<ActionButton action={updateSettings.bind(null, settings)} requireAreYouSure>
	Save Settings
</ActionButton>

Examples

Default

<script lang="ts">
  import { ActionButton } from "$lib/components/components/action-button";
 
  const remoteFunc = async () => {
    // Simulate a remote function
    await new Promise((res) => setTimeout(res, 1000));
    return { error: false };
  };
</script>
 
<ActionButton action={remoteFunc}>Do default behavior</ActionButton>

Require Are You Sure

<script lang="ts">
  import { ActionButton } from "$lib/components/components/action-button";
 
  const remoteFunc = async () => {
    // Simulate a remote function
    await new Promise((res) => setTimeout(res, 1000));
    return { error: false };
  };
</script>
 
<ActionButton
  action={remoteFunc}
  requireAreYouSure
  areYouSureDescription="I can put anything I want here."
>
  Do extra secure action
</ActionButton>

With Error

<script lang="ts">
  import { ActionButton } from "$lib/components/components/action-button";
 
  const remoteFunc = async () => {
    // Simulate a remote function
    await new Promise((res) => setTimeout(res, 1000));
    return {
      error: true,
      message: "Something went wrong. Please try again later."
    };
  };
</script>
 
<ActionButton variant="destructive" action={remoteFunc}
  >Do error action</ActionButton
>

Components Loading Swap