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";
</script>
<Button>Button</Button>
<script lang="ts">
import { Button } from "$lib/components/ui/button";
</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";
</script>
<Button>Button</Button>
<script lang="ts">
import { Button } from "$lib/components/ui/button";
</script>
<Button>Button</Button>
Secondary
Loading...
<script lang="ts">
import { Button } from "$lib/components/ui/button";
</script>
<Button variant="secondary">Secondary</Button>
<script lang="ts">
import { Button } from "$lib/components/ui/button";
</script>
<Button variant="secondary">Secondary</Button>
Destructive
Loading...
<script lang="ts">
import { Button } from "$lib/components/ui/button";
</script>
<Button variant="destructive">Destructive</Button>
<script lang="ts">
import { Button } from "$lib/components/ui/button";
</script>
<Button variant="destructive">Destructive</Button>
Outline
Loading...
<script lang="ts">
import { Button } from "$lib/components/ui/button";
</script>
<Button variant="outline">Outline</Button>
<script lang="ts">
import { Button } from "$lib/components/ui/button";
</script>
<Button variant="outline">Outline</Button>
Ghost
Loading...
<script lang="ts">
import { Button } from "$lib/components/ui/button";
</script>
<Button variant="ghost">Ghost</Button>
<script lang="ts">
import { Button } from "$lib/components/ui/button";
</script>
<Button variant="ghost">Ghost</Button>
Link
Loading...
<script lang="ts">
import { Button } from "$lib/components/ui/button";
</script>
<Button variant="link">Link</Button>
<script lang="ts">
import { Button } from "$lib/components/ui/button";
</script>
<Button variant="link">Link</Button>
With Icon
Loading...
<script lang="ts">
import { EnvelopeOpen } from "radix-icons-svelte";
import { Button } from "$lib/components/ui/button";
</script>
<Button>
<EnvelopeOpen class="mr-2 h-4 w-4" />
Login with Email
</Button>
<script lang="ts">
import { Mail } from "lucide-svelte";
import { Button } from "$lib/components/ui/button";
</script>
<Button>
<Mail class="mr-2 h-4 w-4" />
Login with Email
</Button>
Icon
Loading...
<script lang="ts">
import { ChevronRight } from "radix-icons-svelte";
import { Button } from "$lib/components/ui/button";
</script>
<Button variant="outline" size="icon">
<ChevronRight class="h-4 w-4" />
</Button>
<script lang="ts">
import { ChevronRight } from "lucide-svelte";
import { Button } from "$lib/components/ui/button";
</script>
<Button variant="outline" size="icon">
<ChevronRight class="h-4 w-4" />
</Button>
Loading
Loading...
<script lang="ts">
import { Reload } from "radix-icons-svelte";
import { Button } from "$lib/components/ui/button";
</script>
<Button disabled>
<Reload class="mr-2 h-4 w-4 animate-spin" />
Please wait
</Button>
<script lang="ts">
import { Loader2 } from "lucide-svelte";
import { Button } from "$lib/components/ui/button";
</script>
<Button disabled>
<Loader2 class="mr-2 h-4 w-4 animate-spin" />
Please wait
</Button>
On This Page