Docs
Button
Button
Displays a button or a component that looks like a button.
Loading...
<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@latest add button
Usage
<script lang="ts">
import { Button } from "$lib/components/ui/button";
</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";
</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
Loading...
<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
Loading...
<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
Loading...
<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
Loading...
<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
Loading...
<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
Loading...
<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
Loading...
<script lang="ts">
import EnvelopeOpen from "svelte-radix/EnvelopeOpen.svelte";
import { Button } from "$lib/components/ui/button/index.js";
</script>
<Button>
<EnvelopeOpen class="mr-2 h-4 w-4" />
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 h-4 w-4" />
Login with Email
</Button>
Icon
Loading...
<script lang="ts">
import ChevronRight from "svelte-radix/ChevronRight.svelte";
import { Button } from "$lib/components/ui/button/index.js";
</script>
<Button variant="outline" size="icon">
<ChevronRight class="h-4 w-4" />
</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 class="h-4 w-4" />
</Button>
Loading
Loading...
<script lang="ts">
import Reload from "svelte-radix/Reload.svelte";
import { Button } from "$lib/components/ui/button/index.js";
</script>
<Button disabled>
<Reload class="mr-2 h-4 w-4 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="mr-2 h-4 w-4 animate-spin" />
Please wait
</Button>