Button Component

Usage
Component API

Usage

Excepteur occaecat est velit veniam eu occaecat culpa. Ut fugiat ad Lorem pariatur pariatur ea est deserunt exercitation. Occaecat fugiat qui aute nulla dolore.

Default Button

<script>
  import { Button } from "$lib/components";
</script>

<Button size="lg">Test</Button>
<Button size="md">Test</Button>
<Button size="sm">Test</Button>

Dark Button

<script>
  import { Button } from "$lib/components";
</script>

<Button type="dark" size="lg">Test</Button>
<Button type="dark" size="md">Test</Button>
<Button type="dark" size="sm">Test</Button>

Ghost Button

<script>
  import { Button } from "$lib/components";
</script>

<Button type="ghost" size="lg">Test</Button>
<Button type="ghost" size="md">Test</Button>
<Button type="ghost" size="sm">Test</Button>

Selected icon-only, ghost button

Set selected to true to enable the selected state for an icon-only ghost button.

Content loaded in an iFrame Open in new tab

<script>
  import { Button, Section } from "$lib/components";
  import { BoldIcon, ItalicIcon, UnderlineIcon } from "svelte-feather-icons";

  let index = 1;
</script>

<Section spacing="2rem">
  <Button
    hasIcon
    selected={index === 0}
    type="ghost"
    on:click={() => (index = 0)}
  >
    <svelte:fragment slot="icon">
      <BoldIcon size="16" />
    </svelte:fragment>
  </Button>
  <Button
    hasIcon
    selected={index === 1}
    type="ghost"
    on:click={() => (index = 1)}
  >
    <svelte:fragment slot="icon">
      <ItalicIcon size="16" />
    </svelte:fragment>
  </Button>
  <Button
    hasIcon
    selected={index === 2}
    type="ghost"
    on:click={() => (index = 2)}
  >
    <svelte:fragment slot="icon">
      <UnderlineIcon size="16" />
    </svelte:fragment>
  </Button>
</Section>