diff --git a/src/assets/icon/name=arrow_righr.svg b/src/assets/icon/name=arrow_righr.svg
index f92caa5..f391c6e 100644
--- a/src/assets/icon/name=arrow_righr.svg
+++ b/src/assets/icon/name=arrow_righr.svg
@@ -1,6 +1,6 @@
 <svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
 <g clip-path="url(#clip0_224_2305)">
-<path d="M18.465 6.82118C18.658 6.82118 18.851 6.88551 18.9796 7.07847L23.8037 11.9026C24.1253 12.2242 24.1253 12.6745 23.8037 12.9961L18.9796 17.8202C18.658 18.1418 18.2077 18.1418 17.8861 17.8202C17.5645 17.4986 17.5645 17.0483 17.8861 16.7267L22.26 12.4172L17.9505 8.10762C17.6288 7.78601 17.6288 7.33576 17.9505 7.01415C18.0791 6.88551 18.2721 6.82118 18.465 6.82118Z" fill="#4E5C71"/>
+<path d="M18.465 6.82118C18.658 6.82118 18.851 6.88551 18.9796 7.07847L23.8037 11.9026C24.1253 12.2242 24.1253 12.6745 23.8037 12.9961L18.9796 17.8202C18.658 18.1418 18.2077 18.1418 17.8861 17.8202C17.5645 17.4986 17.5645 17.0483 17.8861 16.7267L22.26 12.4172L17.9505 8.10762C17.6288 7.78601 17.6288 7.33576 17.9505 7.01415C18.0791 6.88551 18.2721 6.82118 18.465 6.82118Z" fill="currentColor"/>
 </g>
 <defs>
 <clipPath id="clip0_224_2305">
diff --git a/src/ui/button/button.styles.css.ts b/src/ui/button/button.styles.css.ts
new file mode 100644
index 0000000..3a583e4
--- /dev/null
+++ b/src/ui/button/button.styles.css.ts
@@ -0,0 +1,85 @@
+import { style } from '@vanilla-extract/css';
+import { recipe } from '@vanilla-extract/recipes';
+import { globalVars } from '../theme.css.ts';
+import { typography } from '../typography.css.ts';
+
+const base = style({
+  display: 'inline-flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  border: 'none',
+  cursor: 'pointer',
+  borderRadius: '40px',
+  transition: 'all 0.1s ease-in-out',
+  userSelect: 'none',
+});
+
+export const buttonVariants = recipe({
+  base,
+  variants: {
+    variant: {
+      primary: {
+        backgroundColor: globalVars.color.mainblue500,
+        color: globalVars.color.white,
+        ':active': {
+          backgroundColor: globalVars.color.blue700,
+          color: globalVars.color.blue300,
+        },
+        '& svg': { color: globalVars.color.white, display: 'flex' },
+        '&:active svg': { color: globalVars.color.blue300 },
+      },
+      secondary: {
+        backgroundColor: globalVars.color.white,
+        color: globalVars.color.mainblue500,
+        border: `1px solid ${globalVars.color.mainblue500}`,
+      },
+      third: {
+        backgroundColor: globalVars.color.white,
+        color: globalVars.color.grey800,
+        border: `1px solid ${globalVars.color.grey300}`,
+        '& svg': { display: 'flex' },
+      },
+    },
+    size: {
+      large: [
+        { padding: '6px 16px', width: '335px', height: '54px' },
+        typography('head_2_16_sb'),
+      ],
+      middle: [
+        { padding: '6px 14px', width: '160px', height: '44px' },
+        typography('head_2_16_sb'),
+      ],
+      small: [
+        { padding: '6px 14px', width: '116px', height: '36px' },
+        typography('body_2_14_sb'),
+      ],
+    },
+    disabled: {
+      true: {
+        cursor: 'not-allowed',
+        opacity: 0.6,
+      },
+      false: {},
+    },
+  },
+  compoundVariants: [
+    {
+      variants: { variant: 'third', size: 'small' },
+      style: {
+        width: '218px',
+        height: '36px',
+        padding: '6px 6px',
+      },
+    },
+  ],
+  defaultVariants: {
+    variant: 'primary',
+    size: 'large',
+    disabled: false,
+  },
+});
+
+export type ButtonVariants = Exclude<
+  Parameters<typeof buttonVariants>[0],
+  undefined
+>;
diff --git a/src/ui/button/button.tsx b/src/ui/button/button.tsx
new file mode 100644
index 0000000..27a81b9
--- /dev/null
+++ b/src/ui/button/button.tsx
@@ -0,0 +1,43 @@
+import { ComponentProps, PropsWithChildren } from 'react';
+import { ArrowRightr, Plus } from '../../assets/index.ts';
+import { cx } from '../util.ts';
+import * as styles from './button.styles.css.ts';
+
+export type ButtonProps = ComponentProps<'button'> & styles.ButtonVariants;
+
+export const Button = ({
+  className,
+  variant,
+  size,
+  disabled,
+  children,
+  ...restProps
+}: PropsWithChildren<ButtonProps>) => {
+  const leftIcon =
+    variant === 'third' && (size === 'small' || size === 'large') ? (
+      <Plus width={20} height={20} />
+    ) : null;
+  const rightIcon =
+    variant === 'primary' && size === 'small' ? (
+      <ArrowRightr width={24} height={24} />
+    ) : null;
+
+  return (
+    <button
+      {...restProps}
+      className={cx(
+        styles.buttonVariants({
+          variant,
+          size,
+          disabled: disabled ? true : false,
+        }),
+        className,
+      )}
+      disabled={disabled}
+    >
+      {leftIcon && <span>{leftIcon}</span>}
+      {children}
+      {rightIcon && <span>{rightIcon}</span>}
+    </button>
+  );
+};