Docs
Button
Button
Displays a button or a component that looks like a button.
<script lang="ts">
import { Button } from "$lib/components/ui/button/index.js";
</script>
<Button>Button</Button>
<script lang="ts">
import { Button } from "$lib/components/ui/button/index.js";
</script>
<Button>Button</Button>
Installation
npx shadcn-svelte@next add button
Install bits-ui:
npm i bits-ui -D
Copy and paste the component source files linked at the top of this page into your project.
Usage
<script lang="ts">
import { Button } from "$lib/components/ui/button/index.js";
</script>
<Button variant="outline">Button</Button>
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>
Examples
Primary
<script lang="ts">
import { Button } from "$lib/components/ui/button/index.js";
</script>
<Button>Button</Button>
<script lang="ts">
import { Button } from "$lib/components/ui/button/index.js";
</script>
<Button>Button</Button>
Secondary
<script lang="ts">
import { Button } from "$lib/components/ui/button/index.js";
</script>
<Button variant="secondary">Secondary</Button>
<script lang="ts">
import { Button } from "$lib/components/ui/button/index.js";
</script>
<Button variant="secondary">Secondary</Button>
Destructive
<script lang="ts">
import { Button } from "$lib/components/ui/button/index.js";
</script>
<Button variant="destructive">Destructive</Button>
<script lang="ts">
import { Button } from "$lib/components/ui/button/index.js";
</script>
<Button variant="destructive">Destructive</Button>
Outline
<script lang="ts">
import { Button } from "$lib/components/ui/button/index.js";
</script>
<Button variant="outline">Outline</Button>
<script lang="ts">
import { Button } from "$lib/components/ui/button/index.js";
</script>
<Button variant="outline">Outline</Button>
Ghost
<script lang="ts">
import { Button } from "$lib/components/ui/button/index.js";
</script>
<Button variant="ghost">Ghost</Button>
<script lang="ts">
import { Button } from "$lib/components/ui/button/index.js";
</script>
<Button variant="ghost">Ghost</Button>
Link
<script lang="ts">
import { Button } from "$lib/components/ui/button/index.js";
</script>
<Button variant="link">Link</Button>
<script lang="ts">
import { Button } from "$lib/components/ui/button/index.js";
</script>
<Button variant="link">Link</Button>
With Icon
<script lang="ts">
import MailOpen from "lucide-svelte/icons/mail-open";
import { Button } from "$lib/components/ui/button/index.js";
</script>
<Button>
<MailOpen />
Login with Email
</Button>
<script lang="ts">
import Mail from "lucide-svelte/icons/mail";
import { Button } from "$lib/components/ui/button/index.js";
</script>
<Button>
<Mail class="mr-2 size-4" />
Login with Email
</Button>
Icon
<script lang="ts">
import ChevronRight from "lucide-svelte/icons/chevron-right";
import { Button } from "$lib/components/ui/button/index.js";
</script>
<Button variant="outline" size="icon">
<ChevronRight />
</Button>
<script lang="ts">
import ChevronRight from "lucide-svelte/icons/chevron-right";
import { Button } from "$lib/components/ui/button/index.js";
</script>
<Button variant="outline" size="icon">
<ChevronRight />
</Button>
Loading
<script lang="ts">
import LoaderCircle from "lucide-svelte/icons/loader-circle";
import { Button } from "$lib/components/ui/button/index.js";
</script>
<Button disabled>
<LoaderCircle class="animate-spin" />
Please wait
</Button>
<script lang="ts">
import LoaderCircle from "lucide-svelte/icons/loader-circle";
import { Button } from "$lib/components/ui/button/index.js";
</script>
<Button disabled>
<LoaderCircle class="animate-spin" />
Please wait
</Button>
On This Page