Displays a button or a component that looks like a button.
1<script lang="ts">
2import { Button } from "@/components/ui/button"
3import { ArrowUpIcon } from "lucide-svelte"
4</script>
Installation
pnpm dlx sprawlify@latest add buttonnpx sprawlify@latest add buttonyarn sprawlify@latest add buttonbunx --bun sprawlify@latest add button
Install the following dependencies:
pnpm add @sprawlify/primitives @sprawlify/sveltenpm install @sprawlify/primitives @sprawlify/svelteyarn add @sprawlify/primitives @sprawlify/sveltebun add @sprawlify/primitives @sprawlify/svelte
Add the following files to your project:
1<script module lang="ts">
2import { cva, type VariantProps } from "class-variance-authority"
3
4export const buttonVariants = cva(
5 "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-lg border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-3 aria-invalid:ring-3 [&_svg:not([class*='size-'])]:size-4 inline-flex items-center justify-center whitespace-nowrap transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none shrink-0 [&_svg]:shrink-0 outline-none group/button select-none",
6 {
7 variants: {
8 variant: {
9 default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
10 outline: "border-border bg-background hover:bg-muted hover:text-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 aria-expanded:bg-muted aria-expanded:text-foreground",
11 secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
12 ghost: "hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground",
13 destructive: "bg-destructive/10 hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/20 text-destructive focus-visible:border-destructive/40 dark:hover:bg-destructive/30",
14 link: "text-primary underline-offset-4 hover:underline",
15 },
16 size: {
17 default: "h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
18 xs: "h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
19 sm: "h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
20 lg: "h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3",
21 icon: "size-8",
22 "icon-xs": "size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",
23 "icon-sm": "size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg",
24 "icon-lg": "size-9",
25 },
26 },
27 defaultVariants: {
28 variant: "default",
29 size: "default"
30 },
31 }
32)
33</script>
34
35<script lang="ts">
36import { cn } from "@/lib/utils"
37import { Sprawlify, type PolymorphicProps } from "@sprawlify/svelte"
38import type { HTMLButtonAttributes } from "svelte/elements";
39
40interface Props extends HTMLButtonAttributes, VariantProps<typeof buttonVariants>, PolymorphicProps<"button"> {}
41
42let { class: className, variant = "default", size = "default", children, ...rest }: Props = $props()
43</script>
44
45<Sprawlify
46 as="button"
47 data-scope="button"
48 data-part="root"
49 data-slot="button"
50 data-variant={variant}
51 data-size={size}
52 class={cn(buttonVariants({ variant, size, className }))}
53 {...rest}
54>
55 {@render children?.()}
56</Sprawlify>1export { default as Button, buttonVariants } from "./button.svelte";2Update the import paths to match your project setup.
Usage
1import { Button } from "@/components/ui/button"1<Button variant="outline">Button</Button>Examples
Default
1<script module lang="ts">
2 import { Button } from "@/components/ui/button"
3</script>
4
Destructive
1<script module lang="ts">
2import { Button } from "@/components/ui/button"
3</script>
4
Ghost
1<script lang="ts">
2import { Button } from "@/components/ui/button"
3</script>
4
Icon
1<script lang="ts">
2import { Button } from "@/components/ui/button"
3import { CircleFadingArrowUp } from "lucide-svelte"
4</script>
Link
You can use the asChild prop on <Button /> to make another component look like a button. Here's an example of a link that looks like a button.
1<script lang="ts">
2import { Button } from "@/components/ui/button"
3</script>
4
Outline
1<script lang="ts">
2import { Button } from "@/components/ui/button"
3</script>
4
Rounded
1<script lang="ts">
2import { Button } from "@/components/ui/button"
3import { ArrowUp } from "lucide-svelte"
4</script>
Secondary
1<script lang="ts">
2import { Button } from "@/components/ui/button"
3</script>
4
Size
Use the size prop to change the size of the button.
1<script lang="ts">
2import { Button } from "@/components/ui/button"
3import { ArrowUpRight } from "lucide-svelte"
4</script>
With Icon
Remember to add the data-icon="inline-start" or data-icon="inline-end" attribute to the icon for the correct spacing.
1<script lang="ts">
2import { Button } from "@/components/ui/button"
3import { GitBranch } from "lucide-svelte"
4</script>