Button

Updated: We have updated the button component to add new sizes: icon-sm and icon-lg. See the changelog for more details.

Installation

CLI
Manual

npx shadcn-svelte@next add button

Usage

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

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

Examples

Size

<!-- Small -->
<Button size="sm" variant="outline">Small</Button>
<Button size="icon-sm" aria-label="Submit" variant="outline">
  <ArrowUpRightIcon />
</Button>

<!-- Medium -->
<Button variant="outline">Default</Button>
<Button size="icon" aria-label="Submit" variant="outline">
  <ArrowUpRightIcon />
</Button>

<!-- Large -->
<Button size="lg" variant="outline">Large</Button>
<Button size="icon-lg" aria-label="Submit" variant="outline">
  <ArrowUpRightIcon />
</Button>

Default

<Button>Button</Button>

Outline

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

Secondary

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

Ghost

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

Destructive

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

Link

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

Icon

<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.

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

Rounded

Use the rounded-full class to make the button rounded.

<Button variant="outline" size="icon" className="rounded-full">
  <ArrowUpRightIcon />
</Button>

Spinner

<Button size="sm" variant="outline" disabled>
  <Spinner />
  Submit
</Button>

Button Group

To create a button group, use the ButtonGroup component. See the Button Group documentation for more details.

Link

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>

Changelog

2025-09-24 New sizes

We have added two new sizes to the button component: icon-sm and icon-lg. These sizes are used to create icon buttons. To add them, edit button.svelte and add the following code under size in buttonVariants:

components/ui/button.svelte

export const buttonVariants = tv({
  // ...
  variants: {
    // ...
    size: {
      // ...
      icon: "size-9",
      "icon-sm": "size-8",
      "icon-lg": "size-10",
    },
  },
});

Get Started

Components

Customization

CLI

Advanced

Resources

Installation

Usage

Examples

Size

Default

Outline

Secondary

Ghost

Destructive

Link

Icon

With Icon

Rounded

Spinner

Button Group

Link

Changelog

2025-09-24 New sizes

Links

​Installation

​Usage

​Examples

​Size

​Default

​Outline

​Secondary

​Ghost

​Destructive

​Link

​Icon

​With Icon

​Rounded

​Spinner

​Button Group

​Link

​Changelog

​2025-09-24 New sizes

​Links

Installation

Usage

Examples

Size

Default

Outline

Secondary

Ghost

Destructive

Link

Icon

With Icon

Rounded

Spinner

Button Group

Link

Changelog

2025-09-24 New sizes

Links