Updated: We have updated the button component to add new sizes: icon-sm and icon-lg. See the changelog for more details.
Installation
npx shadcn-svelte@next add button
Copy component code
Copy and paste the component source code into your project.
<script lang="ts">
import { Button } from "$lib/components/ui/button/index.js";
</script>
<Button variant="outline">Button</Button>
Examples
<!-- 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
Outline
<Button variant="outline">Outline</Button>
Secondary
<Button variant="secondary">Secondary</Button>
<Button variant="ghost">Ghost</Button>
Destructive
<Button variant="destructive">Destructive</Button>
<Button variant="link">Link</Button>
<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.
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>
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",
},
},
});