Button

A button or anchor that handles promises.

<script lang="ts">
	import * as Button from "$lib/components/ui/button/index.js";
</script>

<Button.Root
	variant="outline"
	aria-label="Submit"
	onClickPromise={async () => {
		await new Promise((resolve) => setTimeout(resolve, 1000));
	}}
>
	<Button.Spinner />
	Submit
</Button.Root>

Installation

bun x shadcn-svelte@latest add https://quas.vercel.app/r/button.json

Structure 

<Button.Root>
	<Button.Spinner />
</Button.Root>

Variants 

<script lang="ts">
	import { Button } from "$lib/components/ui/button/index.js";
</script>

<div class="flex gap-2">
	<Button variant="default">Default</Button>
	<Button variant="secondary">Secondary</Button>
	<Button variant="outline">Outline</Button>
	<Button variant="ghost">Ghost</Button>
	<Button variant="destructive">Destructive</Button>
</div>

Sizes 

<script lang="ts">
	import ArrowUpRightIcon from "@lucide/svelte/icons/arrow-up-right";
	import { Button } from "$lib/components/ui/button/index.js";
</script>

<div class="flex gap-2">
	<Button size="sm" variant="outline">Small</Button>
	<Button size="icon-sm" aria-label="Submit" variant="outline">
		<ArrowUpRightIcon />
	</Button>
	<Button variant="outline">Default</Button>
	<Button size="icon" aria-label="Submit" variant="outline">
		<ArrowUpRightIcon />
	</Button>
	<Button variant="outline" size="lg">Large</Button>
	<Button size="icon-lg" aria-label="Submit" variant="outline">
		<ArrowUpRightIcon />
	</Button>
</div>

API Reference

Button. Root
Property Type Description
ref $bindable HTMLElement

A reference to the button element.

Default: null
children Snippet

The content of the button.

Default: ——
variant enum

The visual style of the button.

Default: "default"
size enum

The size of the button.

Default: "default"
loading $bindable boolean

The loading state of the button.

Default: false
onClickPromise function

A function to await on the button click event.

Default: ——
Data Attribute Value Description
data-slot "button"

Slot used to target and apply styles.

data-button-root ——

Present on the root button component.

data-loading enum

The loading state of the button.

Button. Spinner
Data Attribute Value Description
data-slot "button-spinner"

Slot used to target and apply styles.