Button

src/lib/components/common/Button.svelte

@@ -0,0 +1,64 @@
+<script lang="ts">
+  export let href: string = null;
+  export let primary = false;
+  export let ghost = false;
+  export let disabled = false;
+
+  export let title: string = "";
+  export let type: "submit" | "reset" | "button" = "button";
+  export let label = "Submit";
+</script>
+
+{#if href}
+  <a {href} {title} on:click class:ghost class:disabled class:primary>
+    <slot>{label}</slot>
+  </a>
+{:else}
+  <button {title} on:click class:ghost class:primary {disabled} {type}>
+    <slot>{label}</slot>
+  </button>
+{/if}
+
+<style>
+  a,
+  button {
+    cursor: pointer;
+    display: inline-flex;
+    padding: 0.375rem 0.75rem;
+    justify-content: center;
+    align-items: center;
+    gap: 0.5rem;
+
+    border-radius: 0.5rem;
+    border: 1px solid var(--gray-4, #5c717c);
+    background: var(--gray-3, #99a8b3);
+    box-shadow: 0px 2px 0px 0px #5c717c;
+
+    color: var(--gray-1, #f5f6f7);
+    text-align: center;
+    font-size: var(--font-m, 1rem);
+    font-weight: var(--font-semibold, 600);
+  }
+
+  a {
+    text-decoration: none;
+  }
+
+  .primary {
+    border-color: var(--blue-4, #1367d0);
+    background: var(--primary, #4294f0);
+    box-shadow: 0px 2px 0px 0px #1367d0;
+  }
+
+  .ghost {
+    background: none;
+    border: none;
+    box-shadow: none;
+    color: var(--primary, #4294f0);
+  }
+
+  button:disabled,
+  .disabled {
+    opacity: 0.5;
+  }
+</style>

src/lib/components/common/stories/Button.stories.svelte

@@ -0,0 +1,49 @@
+<script context="module" lang="ts">
+  import { Story, Template } from "@storybook/addon-svelte-csf";
+  import { PlusCircle16 } from "svelte-octicons";
+  import Button from "../Button.svelte";
+
+  export const meta = {
+    title: "Components / Common / Button",
+    component: Button,
+    tags: ["autodocs"],
+    parameters: { layout: "centered" },
+  };
+</script>
+
+<Template let:args>
+  <Button {...args}></Button>
+</Template>
+
+<Story name="default" />
+
+<Story name="link" args={{ href: "https://www.documentcloud.org" }} />
+
+<Story name="primary" args={{ primary: true }} />
+
+<Story name="ghost" args={{ ghost: true }} />
+
+<Story name="slotted">
+  <Button>
+    <PlusCircle16 fill="#fff" /> Upload
+  </Button>
+</Story>
+
+<Story name="slotted ghost">
+  <Button ghost primary>
+    <PlusCircle16 fill="#4294F0" /> Upload
+  </Button>
+</Story>
+
+<Story name="disabled ghost">
+  <Button ghost disabled>
+    <PlusCircle16 fill="#4294F0" /> Upload
+  </Button>
+</Story>
+
+<Story name="disabled" args={{ disabled: true }} />
+
+<Story
+  name="link disabled"
+  args={{ href: "https://www.documentcloud.org", disabled: true }}
+/>

src/lib/components/stories/KV.stories.svelte → src/lib/components/common/stories/KV.stories.svelte

@@ -1,6 +1,6 @@
 <script context="module" lang="ts">
   import { Story } from "@storybook/addon-svelte-csf";
-  import KV from "../common/KV.svelte";
+  import KV from "../KV.svelte";
 
   export const meta = {
     title: "Components / Common / KV",