Button

Displays a button or a component that looks like a button.

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

<div class="flex flex-wrap items-center gap-2 md:flex-row">
	<Button variant="outline">Button</Button>
	<Button variant="outline" size="icon" aria-label="Submit">
		<ArrowUpIcon />
	</Button>
</div>

Installation


npx shadcn-svelte@latest add https://shadcn-svelte-registry-template.vercel.app/r/button.json

Usage

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

Examples

Size

<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 flex-col items-start gap-8 sm:flex-row">
  <div class="flex items-start gap-2">
    <Button size="sm" variant="outline">Small</Button>
    <Button size="icon-sm" aria-label="Submit" variant="outline">
      <ArrowUpRightIcon />
    </Button>
  </div>
  <div class="flex items-start gap-2">
    <Button variant="outline">Default</Button>
    <Button size="icon" aria-label="Submit" variant="outline">
      <ArrowUpRightIcon />
    </Button>
  </div>
  <div class="flex items-start gap-2">
    <Button variant="outline" size="lg">Large</Button>
    <Button size="icon-lg" aria-label="Submit" variant="outline">
      <ArrowUpRightIcon />
    </Button>
  </div>
</div>

Default

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

<Button>Button</Button>

Outline

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

<Button variant="outline">Outline</Button>

Secondary

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

<Button variant="secondary">Secondary</Button>

Ghost

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

<Button variant="ghost">Ghost</Button>

Destructive

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

<Button variant="destructive">Destructive</Button>

Link

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

<Button variant="link">Link</Button>

Icon

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

<Button variant="outline" size="icon" aria-label="Submit">
	<CircleFadingArrowUpIcon />
</Button>

With Icon

The spacing between the icon and the text is automatically adjusted based on the size of the button. You do not need any margin on the icon.

<script lang="ts">
	import IconGitBranch from "@lucide/svelte/icons/git-branch";
	import { Button } from "$lib/components/ui/button/index.js";
</script>

<Button variant="outline" size="sm">
	<IconGitBranch /> New Branch
</Button>

Href

You can convert the <button> into an <a> element by simply passing an href as a prop.

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

Alternatively, you can use the buttonVariants helper to create a link that looks like a button.

<script lang="ts">
  import { buttonVariants } from "$lib/components/ui/button";
</script>
 
<a href="/dashboard" class={buttonVariants({ variant: "outline" })}>
  Dashboard
</a>