use styled-components

src/components/button/button.tsx

@@ -1,8 +1,6 @@
 import { ComponentPropsWithoutRef, ElementType } from 'react'
 
-import { clsx } from 'clsx'
-
-import s from './button.module.scss'
+import { styled } from 'styled-components'
 
 export const buttonVariant = ['icon', 'link', 'primary', 'secondary', 'tertiary'] as const
 
@@ -15,9 +13,53 @@ export type ButtonProps<T extends ElementType = 'button'> = {
 } & ComponentPropsWithoutRef<T>
 
 export const Button = <T extends ElementType = 'button'>(props: ButtonProps<T>) => {
-  const { as: Component = 'button', className, fullWidth, variant = 'primary', ...rest } = props
+  const { as: Component = 'button', fullWidth, variant = 'primary', ...rest } = props
 
-  const classNames = clsx(s.button, s[variant], fullWidth && s.fullWidth, className)
-
-  return <Component className={classNames} {...rest} />
+  return <StyledButton as={Component} variant={variant} {...rest} />
 }
+
+const StyledButton = styled.button<{ variant: ButtonVariant }>`
+  all: unset;
+
+  cursor: pointer;
+
+  box-sizing: border-box;
+  padding: 0.5rem 1rem;
+
+  border-radius: 0.25rem;
+
+  &:focus-visible {
+    outline: 2px solid lightcoral;
+    outline-offset: 2px;
+  }
+
+  ${({ variant }) => {
+    switch (variant) {
+      case 'primary':
+        return `
+          background-color: #00f;
+          color: #fff;
+        `
+      case 'secondary':
+        return `
+          background-color: #f00;
+          color: #fff;
+        `
+      case 'tertiary':
+        return `
+          background-color: #fff;
+          color: #000;
+        `
+      case 'icon':
+        return `
+          background-color: transparent;
+          color: #000;
+        `
+      case 'link':
+        return `
+          background-color: transparent;
+          color: #00f;
+        `
+    }
+  }}
+`