feat: add button component

src/scss/components/_index.scss

@@ -1,3 +1,4 @@
+@forward "button/button";
 @forward "callout/callout";
 @forward "card/card";
 @forward "icon/icon";

src/scss/components/button/_button.scss

@@ -0,0 +1,14 @@
+@use "../../tokens/color" as *;
+@use "../../tokens/spacing" as *;
+
+.iati-button {
+  background-color: $color-teal-90;
+  border: none;
+  color: white;
+  text-transform: uppercase;
+  padding: $padding-block;
+
+  &:hover {
+    background-color: $color-teal-80;
+  }
+}

src/scss/components/button/button.stories.ts

@@ -0,0 +1,14 @@
+import type { Meta, StoryObj } from "@storybook/web-components";
+
+import { html } from "lit";
+
+const meta: Meta = {
+  title: "Components/Button",
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const Button: Story = {
+  render: () => html`<button class="iati-button">Button</button>`,
+};