diff --git a/bun.lockb b/bun.lockb
new file mode 100755
index 0000000..5d3b055
Binary files /dev/null and b/bun.lockb differ
diff --git a/src/App.tsx b/src/App.tsx
index 0bf4866..13d4c60 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -54,7 +54,7 @@ function App() {
         </section>
         <section>
           <Heading level={2}>섹션 2</Heading>
-          <Button>클릭</Button>
+          <Button variant={"solid"}>클릭</Button>
         </section>
       </main>
       <footer>
diff --git a/src/components/Button/Button.stories.ts b/src/components/Button/Button.stories.ts
deleted file mode 100644
index 8a27550..0000000
--- a/src/components/Button/Button.stories.ts
+++ /dev/null
@@ -1,40 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { expect, fn, userEvent } from "@storybook/test";
-import { Button } from "./Button";
-
-const meta = {
-  component: Button,
-  parameters: {
-    layout: "centered",
-  },
-  args: { onClick: fn() },
-} satisfies Meta<typeof Button>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Basic: Story = {
-  args: {
-    type: "button",
-    children: "Click",
-  },
-  play: async ({ args: { onClick }, canvas, step }) => {
-    const button = canvas.getByRole("button");
-
-    await step("renders a button with text", async () => {
-      expect(button).toHaveTextContent("Click");
-    });
-
-    await step("calls onClick handler when clicked", async () => {
-      await userEvent.click(button);
-      expect(onClick).toHaveBeenCalledTimes(1);
-    });
-  },
-};
-
-export const Submit: Story = {
-  args: {
-    type: "submit",
-    children: "Submit",
-  },
-};
diff --git a/src/components/Button/Button.stories.tsx b/src/components/Button/Button.stories.tsx
new file mode 100644
index 0000000..94fca49
--- /dev/null
+++ b/src/components/Button/Button.stories.tsx
@@ -0,0 +1,115 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Button } from "./Button";
+import { vstack } from "../../../styled-system/patterns";
+
+export default {
+  component: Button,
+  parameters: {
+    layout: "centered",
+  },
+  args: {
+    children: "시작하기",
+    variant: "solid",
+  },
+} satisfies Meta<typeof Button>;
+
+export const Basic: StoryObj<typeof Button> = {};
+
+export const Variants: StoryObj<typeof Button> = {
+  render: (args) => {
+    return (
+      <div className={vstack({ gap: "4" })}>
+        <Button {...args} variant="solid">
+          솔리드 버튼
+        </Button>
+        <Button {...args} variant="outline">
+          아웃라인 버튼
+        </Button>
+      </div>
+    );
+  },
+  argTypes: {
+    children: {
+      control: false,
+    },
+    variant: {
+      control: false,
+    },
+  },
+};
+
+export const Tones: StoryObj<typeof Button> = {
+  render: (args) => {
+    return (
+      <div className={vstack({ gap: "4" })}>
+        <Button {...args} tone="neutral">
+          중립 색조
+        </Button>
+        <Button {...args} tone="accent">
+          강조 색조
+        </Button>
+        <Button {...args} tone="danger">
+          위험 색조
+        </Button>
+        <Button {...args} tone="warning">
+          경고 색조
+        </Button>
+      </div>
+    );
+  },
+  argTypes: {
+    children: {
+      control: false,
+    },
+    tone: {
+      control: false,
+    },
+  },
+};
+
+export const Sizes: StoryObj<typeof Button> = {
+  render: (args) => {
+    return (
+      <div className={vstack({ gap: "4" })}>
+        <Button {...args} size="sm">
+          작은 버튼
+        </Button>
+        <Button {...args} size="md">
+          중간 버튼
+        </Button>
+        <Button {...args} size="lg">
+          큰 버튼
+        </Button>
+      </div>
+    );
+  },
+  argTypes: {
+    children: {
+      control: false,
+    },
+    size: {
+      control: false,
+    },
+  },
+};
+
+export const Disabled: StoryObj<typeof Button> = {
+  render: (args) => {
+    return (
+      <div className={vstack({ gap: "4" })}>
+        <Button {...args} disabled>
+          비활성화 버튼
+        </Button>
+        <Button {...args}>활성화 버튼</Button>
+      </div>
+    );
+  },
+  argTypes: {
+    children: {
+      control: false,
+    },
+    disabled: {
+      control: false,
+    },
+  },
+};
diff --git a/src/components/Button/Button.test.tsx b/src/components/Button/Button.test.tsx
index c375530..acaa49d 100644
--- a/src/components/Button/Button.test.tsx
+++ b/src/components/Button/Button.test.tsx
@@ -1,23 +1,108 @@
-import { render, screen } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-import { expect, describe, it, vi } from "vitest";
+import { composeStories } from "@storybook/react";
+import { render, screen, fireEvent } from "@testing-library/react";
+import { expect, test, vi } from "vitest";
+import * as stories from "./Button.stories";
 import { Button } from "./Button";
 
-describe("<Button>", () => {
-  it("renders a button with text", () => {
-    render(<Button>Click</Button>);
+const { Basic, Variants, Tones, Sizes, Disabled } = composeStories(stories);
 
-    expect(screen.getByRole("button")).toHaveTextContent("Click");
-  });
+test("renders the button with the correct text content", () => {
+  render(<Basic>테스트</Basic>);
 
-  it("calls onClick handler when clicked", async () => {
-    const user = userEvent.setup();
-    const handleClick = vi.fn();
+  expect(screen.getByText("테스트")).toBeInTheDocument();
+});
+
+test("applies the correct variant styles", () => {
+  render(<Variants />);
+
+  expect(screen.getByText("솔리드 버튼")).toHaveClass("bg_bg");
+  expect(screen.getByText("아웃라인 버튼")).toHaveClass("bd_3px_solid");
+});
+
+test("applies the correct tone styles", () => {
+  render(<Tones />);
+
+  expect(screen.getByText("중립 색조")).toHaveClass("bg_bg");
+  expect(screen.getByText("강조 색조")).toHaveClass("bg_bg.accent");
+  expect(screen.getByText("위험 색조")).toHaveClass("bg_bg.danger");
+  expect(screen.getByText("경고 색조")).toHaveClass("bg_bg.warning");
+});
+
+test("applies the correct font size based on the size prop", () => {
+  render(<Sizes />);
+
+  expect(screen.getByText("작은 버튼")).toHaveClass("fs_sm");
+  expect(screen.getByText("중간 버튼")).toHaveClass("fs_md");
+  expect(screen.getByText("큰 버튼")).toHaveClass("fs_lg");
+});
+
+test("applies the correct disabled styles", () => {
+  render(<Disabled />);
 
-    render(<Button onClick={handleClick}>Click</Button>);
+  expect(screen.getByText("비활성화 버튼")).toBeDisabled();
+  expect(screen.getByText("활성화 버튼")).toBeEnabled();
+  expect(screen.getByText("비활성화 버튼")).toHaveClass("[&:disabled]:op_0.5");
+});
+
+test("renders a button with type='button' by default", () => {
+  render(<Basic>Default Button</Basic>);
+  const button = screen.getByText("Default Button");
+  expect(button).toHaveAttribute("type", "button");
+});
 
-    await user.click(screen.getByRole("button"));
+test("renders a button with type='button' by default", () => {
+  render(<Basic variant="solid">Default Button</Basic>);
+  const button = screen.getByText("Default Button");
+  expect(button).toHaveAttribute("type", "button");
+});
+
+test("renders a button with type='button' when specified", () => {
+  render(
+    <Button type="button" variant="solid">
+      Button Type Button
+    </Button>
+  );
+  const button = screen.getByText("Button Type Button");
+  expect(button).toHaveAttribute("type", "button");
+});
+
+test("renders a button with type='submit' when specified", () => {
+  render(
+    <form>
+      <Button type="submit" variant="solid">
+        Submit Type Button
+      </Button>
+    </form>
+  );
+  const button = screen.getByText("Submit Type Button");
+  expect(button).toHaveAttribute("type", "submit");
+});
+
+test("submits the form when type='submit' button is clicked", () => {
+  const handleSubmit = vi.fn();
+  render(
+    <form onSubmit={handleSubmit}>
+      <Button type="submit" variant="solid">
+        Submit Button
+      </Button>
+    </form>
+  );
+
+  const submitButton = screen.getByText("Submit Button");
+  fireEvent.click(submitButton);
+  expect(handleSubmit).toHaveBeenCalledTimes(1);
+});
 
-    expect(handleClick).toHaveBeenCalledTimes(1);
-  });
+test("does not submit the form when type='button' button is clicked", () => {
+  const handleSubmit = vi.fn();
+  render(
+    <form onSubmit={handleSubmit}>
+      <Button type="button" variant="solid">
+        Button Type Button
+      </Button>
+    </form>
+  );
+  const buttonTypeButton = screen.getByText("Button Type Button");
+  fireEvent.click(buttonTypeButton);
+  expect(handleSubmit).toHaveBeenCalledTimes(0);
 });
diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
index a01eac2..84539d9 100644
--- a/src/components/Button/Button.tsx
+++ b/src/components/Button/Button.tsx
@@ -1,55 +1,245 @@
-import { css } from "../../../styled-system/css";
+import React, { type HTMLAttributes } from "react";
+import { css, cva } from "../../../styled-system/css";
+import type { Tone } from "../../tokens/colors";
 
-export interface ButtonProps {
-  /** 버튼 텍스트 */
+type ButtonVariant = "solid" | "outline";
+type ButtonSize = "sm" | "md" | "lg";
+
+export interface ButtonProps
+  extends Omit<HTMLAttributes<HTMLElement>, "style"> {
+  /** 텍스트 */
   children: React.ReactNode;
+  /** 타입 */
   type?: "button" | "submit";
+  /** 클릭 시 실행함수 */
   onClick?: () => void;
+  /** 종류 */
+  variant: ButtonVariant;
+  /** 색조 */
+  tone?: Tone;
+  /** 버튼의 크기 */
+  size?: ButtonSize;
+  /** 버튼 비활성화 여부 */
+  disabled?: boolean;
 }
 
 /**
- * 버튼 컴포넌트입니다.
+ * - `variant` 속성으로 버튼의 스타일 종류를 지정할 수 있습니다.
+ * - `tone` 속성으로 버튼의 색상 강조를 지정할 수 있습니다.
+ * - `size` 속성으로 버튼의 크기를 지정할 수 있습니다.
+ * - `type` 속성으로 버튼의 타입을 지정할 수 있습니다.
+ * - `disabled` 속성을 사용하여 버튼을 비활성화할 수 있습니다.
  */
 export const Button = ({
   children,
   type = "button",
   onClick,
+  variant = "solid",
+  tone = "neutral",
+  size = "md",
+  disabled,
   ...rest
 }: ButtonProps) => {
   return (
     <button
-      className={css({
-        "--button-color": "#ffffff",
-        "--button-bg-color": "#0d6efd",
-        "--button-hover-bg-color": "#025ce2",
-        appearance: "none",
-        margin: "0",
-        padding: "0.5rem 1rem",
-        background: "var(--button-bg-color)",
-        color: "var(--button-color)",
-        fontSize: "1rem",
-        fontWeight: 400,
-        textAlign: "center",
-        textDecoration: "none",
-        display: "inline-block",
-        width: ["auto", "100%"],
-        border: "none",
-        borderRadius: "4px",
-        boxShadow:
-          "0 4px 6px -1px rgba(0, 0, 0, 0.1),\n    0 2px 4px -1px rgba(0, 0, 0, 0.06)",
-        cursor: "pointer",
-        transition: "0.5s",
-        "&:active, &:hover, &:focus": {
-          background: "var(--button-hover-bg-color)",
-          outline: "0",
-        },
-        "&:disabled": { opacity: 0.5 },
-      })}
+      className={css(styles.raw({ tone, variant, size }), baseStyles)}
       type={type}
       onClick={onClick}
+      disabled={disabled}
       {...rest}
     >
       {children}
     </button>
   );
 };
+
+const baseStyles = {
+  appearance: "none",
+  margin: "0",
+  fontWeight: 500,
+  textAlign: "center",
+  textDecoration: "none",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  width: ["auto", "100%"],
+  borderRadius: "10px",
+  cursor: "pointer",
+  transition: "0.2s",
+  lineHeight: "1",
+  outline: "0",
+  "&:disabled": {
+    opacity: 0.5,
+    cursor: "not-allowed",
+  },
+};
+
+const styles = cva({
+  base: {
+    padding: "0.7rem 3rem",
+  },
+  variants: {
+    size: {
+      sm: {
+        padding: "0.5rem 1.5rem",
+        fontSize: "sm",
+      },
+      md: {
+        padding: "0.7rem 2rem",
+        fontSize: "md",
+      },
+      lg: {
+        padding: "1rem 2.5rem",
+        fontSize: "lg",
+      },
+    },
+    variant: {
+      solid: {},
+      outline: {},
+    },
+    tone: {
+      neutral: {},
+      accent: {},
+      danger: {},
+      warning: {},
+    },
+  },
+  compoundVariants: [
+    {
+      variant: "solid",
+      tone: "neutral",
+      css: {
+        background: "bg",
+        color: "text",
+        "&:active, &:hover": {
+          background: "bg.hover",
+        },
+        "&:focus": {
+          outlineColor: "border.neutral",
+          outline: "3px solid",
+          outlineOffset: "2px",
+        },
+      },
+    },
+    {
+      variant: "solid",
+      tone: "accent",
+      css: {
+        background: "bg.accent",
+        color: "text.accent",
+        "&:active, &:hover": {
+          background: "bg.hover.accent",
+        },
+        "&:focus": {
+          outlineColor: "border.accent",
+          outline: "3px solid",
+          outlineOffset: "2px",
+        },
+      },
+    },
+    {
+      variant: "solid",
+      tone: "danger",
+      css: {
+        background: "bg.danger",
+        color: "text.danger",
+        "&:active, &:hover": {
+          background: "bg.hover.danger",
+        },
+        "&:focus": {
+          outlineColor: "border.danger",
+          outline: "3px solid",
+          outlineOffset: "2px",
+        },
+      },
+    },
+    {
+      variant: "solid",
+      tone: "warning",
+      css: {
+        background: "bg.warning",
+        color: "text.warning",
+        "&:active, &:hover": {
+          background: "bg.hover.warning",
+        },
+        "&:focus": {
+          outlineColor: "border.warning",
+          outline: "3px solid",
+          outlineOffset: "2px",
+        },
+      },
+    },
+    {
+      variant: "outline",
+      tone: "neutral",
+      css: {
+        border: "3px solid",
+        borderColor: "border",
+        color: "text",
+        "&:active, &:hover": {
+          background: "bg.hover",
+          color: "text.muted",
+        },
+        "&:focus": {
+          outlineColor: "border.neutral",
+          outline: "3px solid",
+          outlineOffset: "2px",
+        },
+      },
+    },
+    {
+      variant: "outline",
+      tone: "accent",
+      css: {
+        border: "3px solid",
+        borderColor: "border.accent",
+        color: "text.accent",
+        "&:active, &:hover": {
+          background: "bg.hover.accent",
+          color: "text.muted.accent",
+        },
+        "&:focus": {
+          outlineColor: "border.accent",
+          outline: "3px solid",
+          outlineOffset: "2px",
+        },
+      },
+    },
+    {
+      variant: "outline",
+      tone: "danger",
+      css: {
+        border: "3px solid",
+        borderColor: "border.danger",
+        color: "text.danger",
+        "&:active, &:hover": {
+          background: "bg.hover.danger",
+          color: "text.muted.danger",
+        },
+        "&:focus": {
+          outlineColor: "border.danger",
+          outline: "3px solid",
+          outlineOffset: "2px",
+        },
+      },
+    },
+    {
+      variant: "outline",
+      tone: "warning",
+      css: {
+        border: "3px solid",
+        borderColor: "border.warning",
+        color: "text.warning",
+        "&:active, &:hover": {
+          background: "bg.hover.warning",
+          color: "text.muted.warning",
+        },
+        "&:focus": {
+          outlineColor: "border.warning",
+          outline: "3px solid",
+          outlineOffset: "2px",
+        },
+      },
+    },
+  ],
+});