add polymorphic button

src/components/index.ts

@@ -0,0 +1 @@
+export * from './ui'

src/components/ui/button/button.module.scss

@@ -0,0 +1,19 @@
+.primary {
+  background-color: red;
+}
+
+.secondary {
+  background-color: green;
+}
+
+.tertiary {
+  background-color: blue;
+}
+
+.link {
+  background-color: yellow;
+}
+
+.fullWidth {
+  width: 100%;
+}

src/components/ui/button/button.stories.tsx

@@ -0,0 +1,65 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { Button } from './'
+
+const meta = {
+  title: 'Components/Button',
+  component: Button,
+  tags: ['autodocs'],
+  argTypes: {
+    variant: {
+      options: ['primary', 'secondary', 'tertiary', 'link'],
+      control: { type: 'radio' },
+    },
+  },
+} satisfies Meta<typeof Button>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Primary: Story = {
+  args: {
+    variant: 'primary',
+    children: 'Primary Button',
+    disabled: false,
+  },
+}
+
+export const Secondary: Story = {
+  args: {
+    variant: 'secondary',
+    children: 'Secondary Button',
+    disabled: false,
+  },
+}
+export const Tertiary: Story = {
+  args: {
+    variant: 'tertiary',
+    children: 'Tertiary Button',
+    disabled: false,
+  },
+}
+export const Link: Story = {
+  args: {
+    variant: 'link',
+    children: 'Tertiary Button',
+    disabled: false,
+  },
+}
+
+export const FullWidth: Story = {
+  args: {
+    variant: 'primary',
+    children: 'Full Width Button',
+    disabled: false,
+    fullWidth: true,
+  },
+}
+
+export const AsLink: Story = {
+  args: {
+    variant: 'primary',
+    children: 'Link that looks like a button',
+    as: 'a',
+  },
+}

src/components/ui/button/button.tsx

@@ -0,0 +1,19 @@
+import { ComponentPropsWithoutRef, ElementType, ReactNode } from 'react'
+
+import s from './button.module.scss'
+
+export type ButtonProps<T extends ElementType = 'button'> = {
+  as?: T
+  children: ReactNode
+  variant?: 'primary' | 'secondary' | 'tertiary' | 'link'
+  fullWidth?: boolean
+  className?: string
+} & ComponentPropsWithoutRef<T>
+
+export const Button = <T extends ElementType = 'button'>(props: ButtonProps<T>) => {
+  const { variant = 'primary', fullWidth, className, as: Component = 'button', ...rest } = props
+
+  return (
+    <Component className={`${s[variant]} ${fullWidth ? s.fullWidth : ''} ${className}`} {...rest} />
+  )
+}

src/components/ui/button/index.ts

@@ -0,0 +1 @@
+export * from './button'

src/components/ui/index.ts

@@ -0,0 +1 @@
+export * from './button'