title: Basic Button Usage

description: Simple button implementation with different variants

component: Button

code:
<script>
  import { Button } from '$lib/components/ui/button';
</script>

<!-- Basic button -->
<Button>Default Button</Button>

<!-- Button variants -->
<Button variant="secondary">Secondary</Button>
<Button variant="outline">Outline</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="link">Link</Button>
<Button variant="destructive">Destructive</Button>

<!-- Button sizes -->
<Button size="sm">Small</Button>
<Button size="default">Default</Button>
<Button size="lg">Large</Button>

category: buttons

complexity: basic


title: Button with Icons

description: Buttons with icons using Lucide icons

code:
<script>
  import { Button } from '$lib/components/ui/button';
  import { ChevronRight, Download, Plus } from 'lucide-svelte';
</script>

<!-- Button with icon -->
<Button>
  <Plus class="mr-2 h-4 w-4" />
  Add Item
</Button>

<!-- Icon-only button -->
<Button variant="outline" size="icon">
  <Download class="h-4 w-4" />
</Button>

<!-- Button with trailing icon -->
<Button variant="ghost">
  Continue
  <ChevronRight class="ml-2 h-4 w-4" />
</Button>

complexity: intermediate


title: Loading Button State

description: Button with loading state and disabled functionality

code:
<script>
  import { Button } from '$lib/components/ui/button';
  import { Loader2 } from 'lucide-svelte';

  let loading = false;

  async function handleSubmit() {
    loading = true;
    // Simulate API call
    await new Promise(resolve => setTimeout(resolve, 2000));
    loading = false;
  }
</script>

<!-- Loading button -->
<Button on:click={handleSubmit} disabled={loading}>
  {#if loading}
    <Loader2 class="mr-2 h-4 w-4 animate-spin" />
    Loading...
  {:else}
    Submit
  {/if}
</Button>

<!-- Alternative with bind -->
<Button disabled={loading}>
  {loading ? 'Processing...' : 'Process'}
</Button>


title: Button Group Pattern

description: Group of related buttons with consistent spacing

code:
<script>
  import { Button } from '$lib/components/ui/button';
  import { Bold, Italic, Underline } from 'lucide-svelte';

  let activeFormats = new Set();

  function toggleFormat(format) {
    if (activeFormats.has(format)) {
      activeFormats.delete(format);
    } else {
      activeFormats.add(format);
    }
    activeFormats = activeFormats;
  }
</script>

<!-- Button group -->
<div class="flex rounded-md shadow-sm" role="group">
  <Button
    variant={activeFormats.has('bold') ? 'default' : 'outline'}
    size="icon"
    class="rounded-r-none"
    on:click={() => toggleFormat('bold')}
  >
    <Bold class="h-4 w-4" />
  </Button>
  <Button
    variant={activeFormats.has('italic') ? 'default' : 'outline'}
    size="icon"
    class="rounded-none border-l-0"
    on:click={() => toggleFormat('italic')}
  >
    <Italic class="h-4 w-4" />
  </Button>
  <Button
    variant={activeFormats.has('underline') ? 'default' : 'outline'}
    size="icon"
    class="rounded-l-none border-l-0"
    on:click={() => toggleFormat('underline')}
  >
    <Underline class="h-4 w-4" />
  </Button>
</div>

complexity: advanced