diff --git a/.yarn/cache/@daangn-icon-data-npm-0.0.18-3788ca3104-b5e61aa033.zip b/.yarn/cache/@daangn-icon-data-npm-0.0.19-790e2b55e5-0bac33a47d.zip
similarity index 54%
rename from .yarn/cache/@daangn-icon-data-npm-0.0.18-3788ca3104-b5e61aa033.zip
rename to .yarn/cache/@daangn-icon-data-npm-0.0.19-790e2b55e5-0bac33a47d.zip
index ea551aa4e..baf2969e5 100644
Binary files a/.yarn/cache/@daangn-icon-data-npm-0.0.18-3788ca3104-b5e61aa033.zip and b/.yarn/cache/@daangn-icon-data-npm-0.0.19-790e2b55e5-0bac33a47d.zip differ
diff --git a/.yarn/cache/@daangn-react-monochrome-icon-npm-0.0.14-bd603e1ea2-c02ca32122.zip b/.yarn/cache/@daangn-react-monochrome-icon-npm-0.0.14-bd603e1ea2-c02ca32122.zip
new file mode 100644
index 000000000..e2413884e
Binary files /dev/null and b/.yarn/cache/@daangn-react-monochrome-icon-npm-0.0.14-bd603e1ea2-c02ca32122.zip differ
diff --git a/docs/.storybook/preview-head.html b/docs/.storybook/preview-head.html
index 3d5a9d966..a81888a56 100644
--- a/docs/.storybook/preview-head.html
+++ b/docs/.storybook/preview-head.html
@@ -13,6 +13,7 @@
         "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif,
         "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
         "Noto Color Emoji";
+      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
     }
 
     body.sb-show-main.sb-main-padded {
@@ -45,4 +46,4 @@
       "ios"
     );
   </script>
-</head>
+</head>
\ No newline at end of file
diff --git a/docs/app/global.css b/docs/app/global.css
index 1fdd1f9a3..a7dd32f25 100644
--- a/docs/app/global.css
+++ b/docs/app/global.css
@@ -64,3 +64,8 @@
 .dark #nd-sidebar {
   --muted: 0deg 0% 16%;
 }
+
+.example-reset {
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+    Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+}
diff --git a/docs/components/component-example.tsx b/docs/components/component-example.tsx
index 8e4ceab1e..5441a46a0 100644
--- a/docs/components/component-example.tsx
+++ b/docs/components/component-example.tsx
@@ -32,7 +32,7 @@ export function ComponentExample(props: ComponentExampleProps) {
         <Tab value="미리보기">
           <React.Suspense fallback={null}>
             <div
-              className="not-prose"
+              className="not-prose example-reset"
               style={{
                 minHeight: "300px",
                 width: "100%",
diff --git a/docs/components/example/index.json b/docs/components/example/index.json
index a7c8e08f2..66d327fc6 100644
--- a/docs/components/example/index.json
+++ b/docs/components/example/index.json
@@ -163,6 +163,11 @@
   "progress-circle-preview": "import { ProgressCircle } from \"seed-design/ui/progress-circle\";\n\nexport default function ProgressCirclePreview() {\n  return <ProgressCircle tone=\"neutral\" size=\"40\" />;\n}",
   "progress-circle-small": "import { ProgressCircle } from \"seed-design/ui/progress-circle\";\n\nexport default function ProgressCirclePreview() {\n  return <ProgressCircle size=\"40\" />;\n}",
   "progress-circle-static-white": "import { ProgressCircle } from \"seed-design/ui/progress-circle\";\n\nexport default function ProgressCircleStaticWhite() {\n  return (\n    <div\n      style={{\n        display: \"flex\",\n        flex: 1,\n        width: \"100%\",\n        alignItems: \"center\",\n        justifyContent: \"center\",\n        background: \"#000\",\n      }}\n    >\n      <ProgressCircle tone=\"staticWhite\" />\n    </div>\n  );\n}",
+  "reaction-button-disabled": "import { IconFaceSmileCircleFill } from \"@daangn/react-monochrome-icon\";\nimport { ReactionButton } from \"seed-design/ui/reaction-button\";\n\nexport default function ReactionButtonDisabled() {\n  return (\n    <ReactionButton prefixIcon={<IconFaceSmileCircleFill />} disabled>\n      비활성\n    </ReactionButton>\n  );\n}",
+  "reaction-button-loading": "import { IconFaceSmileCircleFill } from \"@daangn/react-monochrome-icon\";\nimport { useState } from \"react\";\nimport { ReactionButton } from \"seed-design/ui/reaction-button\";\n\nexport default function ReactionButtonLoading() {\n  const [pressed, setPressed] = useState(false);\n  const [loading, setLoading] = useState(false);\n\n  function handleToggle() {\n    setLoading(true);\n    setTimeout(() => {\n      setLoading(false);\n      setPressed((prev) => !prev);\n    }, 2000);\n  }\n\n  // 이벤트 핸들링이 필요할 수 있으므로 loading은 disabled를 포함하지 않습니다. 이벤트 발생을 원하지 않는 경우, disabled 속성을 추가해주세요.\n  return (\n    <ReactionButton\n      prefixIcon={<IconFaceSmileCircleFill />}\n      loading={loading}\n      pressed={pressed}\n      onPressedChange={handleToggle}\n    >\n      시간이 걸리는 토글\n    </ReactionButton>\n  );\n}",
+  "reaction-button-preview": "import { IconFaceSmileCircleFill } from \"@daangn/react-monochrome-icon\";\nimport { ReactionButton } from \"seed-design/ui/reaction-button\";\n\nexport default function ReactionButtonPreview() {\n  return (\n    <ReactionButton prefixIcon={<IconFaceSmileCircleFill />} count={1}>\n      도움돼요\n    </ReactionButton>\n  );\n}",
+  "reaction-button-small": "import { IconFaceSmileCircleFill } from \"@daangn/react-monochrome-icon\";\nimport { ReactionButton } from \"seed-design/ui/reaction-button\";\n\nexport default function ReactionButtonSmall() {\n  return (\n    <ReactionButton prefixIcon={<IconFaceSmileCircleFill />} size=\"small\" count={1}>\n      도움돼요\n    </ReactionButton>\n  );\n}",
+  "reaction-button-xsmall": "import { IconFaceSmileCircleFill } from \"@daangn/react-monochrome-icon\";\nimport { ReactionButton } from \"seed-design/ui/reaction-button\";\n\nexport default function ReactionButtonXsmall() {\n  return (\n    <ReactionButton prefixIcon={<IconFaceSmileCircleFill />} size=\"xsmall\" count={1}>\n      도움돼요\n    </ReactionButton>\n  );\n}",
   "segmented-control-disabled": "import { SegmentedControl, Segment } from \"seed-design/ui/segmented-control\";\n\nexport default function SegmentedControlPreview() {\n  return (\n    <SegmentedControl defaultValue=\"Hot\" disabled>\n      <Segment value=\"Hot\">Hot</Segment>\n      <Segment value=\"New\">New</Segment>\n    </SegmentedControl>\n  );\n}",
   "segmented-control-fixed-width": "import { SegmentedControl, Segment } from \"seed-design/ui/segmented-control\";\n\nexport default function SegmentedControlFixedWidth() {\n  return (\n    <SegmentedControl defaultValue=\"new\">\n      <Segment value=\"new\">New</Segment>\n      <Segment value=\"hot\">Hot</Segment>\n    </SegmentedControl>\n  );\n}",
   "segmented-control-long-label-fixed-width": "import { SegmentedControl, Segment } from \"seed-design/ui/segmented-control\";\n\nexport default function SegmentedControlLongLabelFixedWidth() {\n  return (\n    <SegmentedControl defaultValue=\"price\">\n      <Segment value=\"price\">가격 높은 순</Segment>\n      <Segment value=\"discount\">할인율 높은 순</Segment>\n      <Segment value=\"popularity\">인기 많은 순</Segment>\n    </SegmentedControl>\n  );\n}",
diff --git a/docs/components/example/reaction-button-disabled.tsx b/docs/components/example/reaction-button-disabled.tsx
new file mode 100644
index 000000000..0fa8e7ebc
--- /dev/null
+++ b/docs/components/example/reaction-button-disabled.tsx
@@ -0,0 +1,10 @@
+import { IconFaceSmileCircleFill } from "@daangn/react-monochrome-icon";
+import { ReactionButton } from "seed-design/ui/reaction-button";
+
+export default function ReactionButtonDisabled() {
+  return (
+    <ReactionButton prefixIcon={<IconFaceSmileCircleFill />} disabled>
+      비활성
+    </ReactionButton>
+  );
+}
diff --git a/docs/components/example/reaction-button-loading.tsx b/docs/components/example/reaction-button-loading.tsx
new file mode 100644
index 000000000..58a42a44c
--- /dev/null
+++ b/docs/components/example/reaction-button-loading.tsx
@@ -0,0 +1,30 @@
+"use client";
+
+import { IconFaceSmileCircleFill } from "@daangn/react-monochrome-icon";
+import { useState } from "react";
+import { ReactionButton } from "seed-design/ui/reaction-button";
+
+export default function ReactionButtonLoading() {
+  const [pressed, setPressed] = useState(false);
+  const [loading, setLoading] = useState(false);
+
+  function handleToggle() {
+    setLoading(true);
+    setTimeout(() => {
+      setLoading(false);
+      setPressed((prev) => !prev);
+    }, 2000);
+  }
+
+  // 이벤트 핸들링이 필요할 수 있으므로 loading은 disabled를 포함하지 않습니다. 이벤트 발생을 원하지 않는 경우, disabled 속성을 추가해주세요.
+  return (
+    <ReactionButton
+      prefixIcon={<IconFaceSmileCircleFill />}
+      loading={loading}
+      pressed={pressed}
+      onPressedChange={handleToggle}
+    >
+      시간이 걸리는 토글
+    </ReactionButton>
+  );
+}
diff --git a/docs/components/example/reaction-button-preview.tsx b/docs/components/example/reaction-button-preview.tsx
new file mode 100644
index 000000000..8c2f6fef3
--- /dev/null
+++ b/docs/components/example/reaction-button-preview.tsx
@@ -0,0 +1,10 @@
+import { IconFaceSmileCircleFill } from "@daangn/react-monochrome-icon";
+import { ReactionButton } from "seed-design/ui/reaction-button";
+
+export default function ReactionButtonPreview() {
+  return (
+    <ReactionButton prefixIcon={<IconFaceSmileCircleFill />} count={1}>
+      도움돼요
+    </ReactionButton>
+  );
+}
diff --git a/docs/components/example/reaction-button-small.tsx b/docs/components/example/reaction-button-small.tsx
new file mode 100644
index 000000000..f0e97cb77
--- /dev/null
+++ b/docs/components/example/reaction-button-small.tsx
@@ -0,0 +1,10 @@
+import { IconFaceSmileCircleFill } from "@daangn/react-monochrome-icon";
+import { ReactionButton } from "seed-design/ui/reaction-button";
+
+export default function ReactionButtonSmall() {
+  return (
+    <ReactionButton prefixIcon={<IconFaceSmileCircleFill />} size="small" count={1}>
+      도움돼요
+    </ReactionButton>
+  );
+}
diff --git a/docs/components/example/reaction-button-xsmall.tsx b/docs/components/example/reaction-button-xsmall.tsx
new file mode 100644
index 000000000..e2eadf56c
--- /dev/null
+++ b/docs/components/example/reaction-button-xsmall.tsx
@@ -0,0 +1,10 @@
+import { IconFaceSmileCircleFill } from "@daangn/react-monochrome-icon";
+import { ReactionButton } from "seed-design/ui/reaction-button";
+
+export default function ReactionButtonXsmall() {
+  return (
+    <ReactionButton prefixIcon={<IconFaceSmileCircleFill />} size="xsmall" count={1}>
+      도움돼요
+    </ReactionButton>
+  );
+}
diff --git a/docs/content/docs/design/components/reaction-button.mdx b/docs/content/docs/design/components/reaction-button.mdx
new file mode 100644
index 000000000..fec692111
--- /dev/null
+++ b/docs/content/docs/design/components/reaction-button.mdx
@@ -0,0 +1,31 @@
+---
+title: Reaction Button
+description: TBD
+---
+
+<SanityGuideline title="Reaction Button" />
+
+## 옵션 테이블
+
+| 속성        | 값                         | 기본값    |
+| ----------- | ------------------------- | --------- |
+| size        | xsmall, small             | small     |
+| disabled    | true, false               | false     |
+| loading     | true, false               | false     |
+| prefix icon | icon                      |           |
+| count       | number                    |           |
+
+## 링크
+
+<Cards>
+  <Card
+    icon={<AtomIcon />}
+    title="React"
+    description="Reaction Button 컴포넌트를 React로 사용하는 방법을 설명합니다."
+    href="/docs/react/components/reaction-button"
+  />
+</Cards>
+
+## Spec
+
+<ComponentSpecBlock id="reaction-button" />
diff --git a/docs/content/docs/react/components/reaction-button.mdx b/docs/content/docs/react/components/reaction-button.mdx
new file mode 100644
index 000000000..2975ddc71
--- /dev/null
+++ b/docs/content/docs/react/components/reaction-button.mdx
@@ -0,0 +1,31 @@
+---
+title: Reaction Button
+---
+
+<ComponentExample name="reaction-button-preview" />
+
+## 설치
+
+<Installation name="reaction-button" />
+
+## Props
+
+<ReactTypeTable path="./registry/ui/reaction-button.tsx" name="ReactionButtonProps" />
+
+## 예제
+
+### Small
+
+<ComponentExample name="reaction-button-small" />
+
+### Xsmall
+
+<ComponentExample name="reaction-button-xsmall" />
+
+### Disabled
+
+<ComponentExample name="reaction-button-disabled" />
+
+### Loading
+
+<ComponentExample name="reaction-button-loading" />
\ No newline at end of file
diff --git a/docs/package.json b/docs/package.json
index 6dc24b5b7..3e9f4785b 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -19,8 +19,8 @@
     "build-storybook": "storybook build"
   },
   "dependencies": {
-    "@daangn/icon-data": "^0.0.18",
-    "@daangn/react-monochrome-icon": "^0.0.13",
+    "@daangn/icon-data": "^0.0.19",
+    "@daangn/react-monochrome-icon": "^0.0.14",
     "@daangn/react-multicolor-icon": "^0.0.12",
     "@next/env": "^15.0.4",
     "@portabletext/react": "^3.1.0",
diff --git a/docs/public/__registry__/ui/index.json b/docs/public/__registry__/ui/index.json
index 3bc48d895..66e81b6c0 100644
--- a/docs/public/__registry__/ui/index.json
+++ b/docs/public/__registry__/ui/index.json
@@ -49,6 +49,16 @@
       "ui:toggle-button.tsx"
     ]
   },
+  {
+    "name": "reaction-button",
+    "dependencies": [
+      "@radix-ui/react-slot",
+      "@seed-design/react-toggle"
+    ],
+    "files": [
+      "ui:reaction-button.tsx"
+    ]
+  },
   {
     "name": "fab",
     "dependencies": [
diff --git a/docs/public/__registry__/ui/reaction-button.json b/docs/public/__registry__/ui/reaction-button.json
new file mode 100644
index 000000000..5d47c082f
--- /dev/null
+++ b/docs/public/__registry__/ui/reaction-button.json
@@ -0,0 +1,14 @@
+{
+  "name": "reaction-button",
+  "dependencies": [
+    "@radix-ui/react-slot",
+    "@seed-design/react-toggle"
+  ],
+  "registries": [
+    {
+      "name": "reaction-button.tsx",
+      "type": "ui",
+      "content": "\"use client\";\n\nimport \"@seed-design/stylesheet/progressCircle.css\";\nimport \"@seed-design/stylesheet/reactionButton.css\";\n\nimport { Slot } from \"@radix-ui/react-slot\";\nimport { useToggle, type UseToggleProps } from \"@seed-design/react-toggle\";\nimport {\n  reactionButton,\n  type ReactionButtonVariantProps,\n} from \"@seed-design/recipe/reactionButton\";\nimport clsx from \"clsx\";\nimport * as React from \"react\";\nimport { ProgressCircle } from \"./progress-circle\";\n\nexport interface ReactionButtonProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement>,\n    UseToggleProps,\n    ReactionButtonVariantProps {\n  prefixIcon?: React.ReactNode;\n\n  count?: number;\n\n  loading?: boolean;\n\n  /**\n   * @default false\n   */\n  asChild?: boolean;\n}\n\n/**\n * @see https://v3.seed-design.io/docs/react/components/reaction-button\n */\nexport const ReactionButton = React.forwardRef<\n  HTMLButtonElement,\n  ReactionButtonProps\n>(\n  (\n    {\n      className,\n      size = \"small\",\n      children,\n      prefixIcon,\n      count,\n      loading = false,\n      asChild = false,\n      ...otherProps\n    },\n    ref,\n  ) => {\n    const Comp = asChild ? Slot : \"button\";\n    const { rootProps, stateProps, restProps } = useToggle(otherProps);\n    const classNames = reactionButton({ size });\n    const dataProps = {\n      ...stateProps,\n      \"data-loading\": loading ? \"\" : undefined,\n    };\n\n    return (\n      <Comp\n        ref={ref}\n        className={clsx(classNames.root, className)}\n        {...dataProps}\n        {...rootProps}\n        {...restProps}\n      >\n        {prefixIcon && (\n          <Slot aria-hidden {...dataProps} className={classNames.prefixIcon}>\n            {prefixIcon}\n          </Slot>\n        )}\n        <span {...dataProps} className={classNames.label}>\n          {children}\n        </span>\n        <span {...dataProps} className={classNames.count}>\n          {count}\n        </span>\n        {loading ? (\n          <ProgressCircle\n            {...dataProps}\n            className={classNames.progressCircle}\n          />\n        ) : null}\n      </Comp>\n    );\n  },\n);\nReactionButton.displayName = \"ReactionButton\";\n"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/docs/public/rootage/components/checkbox.json b/docs/public/rootage/components/checkbox.json
index 0d6c9acc3..160d6ef22 100644
--- a/docs/public/rootage/components/checkbox.json
+++ b/docs/public/rootage/components/checkbox.json
@@ -8,8 +8,7 @@
     "base": {
       "enabled": {
         "label": {
-          "color": "$color.fg.neutral",
-          "lineHeight": "$line-height.s5"
+          "color": "$color.fg.neutral"
         },
         "root": {
           "gap": "$unit.s2"
@@ -111,7 +110,7 @@
     "size=small": {
       "enabled": {
         "root": {
-          "minHeight": "$unit.s8"
+          "minHeight": "$unit.s7"
         },
         "label": {
           "fontSize": "$font-size.s3",
diff --git a/docs/public/rootage/components/reaction-button.json b/docs/public/rootage/components/reaction-button.json
new file mode 100644
index 000000000..5a70f5807
--- /dev/null
+++ b/docs/public/rootage/components/reaction-button.json
@@ -0,0 +1,141 @@
+{
+  "kind": "ComponentSpec",
+  "metadata": {
+    "id": "reaction-button",
+    "name": "Reaction Button"
+  },
+  "data": {
+    "base": {
+      "enabled": {
+        "root": {
+          "color": "$color.bg.neutral-weak",
+          "colorDuration": "$duration.s4",
+          "colorTimingFunction": "$timing-function.easing"
+        },
+        "label": {
+          "color": "$color.fg.neutral",
+          "fontWeight": "$font-weight.medium"
+        },
+        "count": {
+          "color": "$color.fg.neutral",
+          "fontWeight": "$font-weight.bold"
+        },
+        "prefixIcon": {
+          "color": "$color.fg.neutral"
+        },
+        "progressCircle": {
+          "trackColor": "$color.palette.gray-500",
+          "rangeColor": "$color.fg.neutral"
+        }
+      },
+      "pressed": {
+        "root": {
+          "color": "$color.bg.neutral-weak-pressed"
+        }
+      },
+      "selected": {
+        "root": {
+          "color": "$color.bg.layer-default",
+          "strokeColor": "$color.stroke.brand",
+          "strokeWidth": "1px"
+        },
+        "label": {
+          "color": "$color.fg.brand"
+        },
+        "count": {
+          "color": "$color.fg.brand"
+        },
+        "prefixIcon": {
+          "color": "$color.fg.brand"
+        },
+        "progressCircle": {
+          "trackColor": "$color.palette.carrot-200",
+          "rangeColor": "$color.fg.brand"
+        }
+      },
+      "selected,pressed": {
+        "root": {
+          "color": "$color.bg.layer-default-pressed"
+        }
+      },
+      "disabled": {
+        "root": {
+          "color": "$color.bg.disabled",
+          "strokeWidth": "0px"
+        },
+        "label": {
+          "color": "$color.fg.disabled"
+        },
+        "count": {
+          "color": "$color.fg.disabled"
+        },
+        "prefixIcon": {
+          "color": "$color.fg.disabled"
+        }
+      },
+      "loading": {
+        "root": {
+          "color": "$color.bg.neutral-weak-pressed"
+        }
+      },
+      "selected,loading": {
+        "root": {
+          "color": "$color.bg.layer-default-pressed",
+          "strokeWidth": "1px"
+        }
+      }
+    },
+    "size=xsmall": {
+      "enabled": {
+        "root": {
+          "minHeight": "$unit.s8",
+          "cornerRadius": "$radius.full",
+          "gap": "$unit.s1",
+          "paddingX": "$unit.s3",
+          "paddingY": "$unit.s1_5"
+        },
+        "prefixIcon": {
+          "size": "18px"
+        },
+        "label": {
+          "fontSize": "$font-size.s3",
+          "lineHeight": "$line-height.s3"
+        },
+        "count": {
+          "fontSize": "$font-size.s3",
+          "lineHeight": "$line-height.s3"
+        },
+        "progressCircle": {
+          "size": "14px",
+          "thickness": "2px"
+        }
+      }
+    },
+    "size=small": {
+      "enabled": {
+        "root": {
+          "minHeight": "$unit.s9",
+          "cornerRadius": "$radius.full",
+          "gap": "$unit.s1",
+          "paddingX": "$unit.s3_5",
+          "paddingY": "$unit.s2"
+        },
+        "prefixIcon": {
+          "size": "18px"
+        },
+        "label": {
+          "fontSize": "$font-size.s3",
+          "lineHeight": "$line-height.s3"
+        },
+        "count": {
+          "fontSize": "$font-size.s3",
+          "lineHeight": "$line-height.s3"
+        },
+        "progressCircle": {
+          "size": "14px",
+          "thickness": "2px"
+        }
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/docs/public/rootage/components/toggle-button.json b/docs/public/rootage/components/toggle-button.json
index e2188309e..7f3e49dc2 100644
--- a/docs/public/rootage/components/toggle-button.json
+++ b/docs/public/rootage/components/toggle-button.json
@@ -24,9 +24,6 @@
         "label": {
           "color": "$color.fg.static-white"
         },
-        "icon": {
-          "color": "$color.fg.static-white"
-        },
         "prefixIcon": {
           "color": "$color.fg.static-white"
         },
@@ -50,9 +47,6 @@
         "label": {
           "color": "$color.fg.neutral"
         },
-        "icon": {
-          "color": "$color.fg.neutral"
-        },
         "prefixIcon": {
           "color": "$color.fg.neutral"
         },
@@ -76,9 +70,6 @@
         "label": {
           "color": "$color.fg.disabled"
         },
-        "icon": {
-          "color": "$color.fg.disabled"
-        },
         "prefixIcon": {
           "color": "$color.fg.disabled"
         },
@@ -105,9 +96,6 @@
         "label": {
           "color": "$color.fg.neutral"
         },
-        "icon": {
-          "color": "$color.fg.neutral"
-        },
         "prefixIcon": {
           "color": "$color.fg.neutral"
         },
@@ -131,9 +119,6 @@
         "label": {
           "color": "$color.fg.neutral"
         },
-        "icon": {
-          "color": "$color.fg.neutral"
-        },
         "prefixIcon": {
           "color": "$color.fg.neutral"
         },
@@ -157,9 +142,6 @@
         "label": {
           "color": "$color.fg.disabled"
         },
-        "icon": {
-          "color": "$color.fg.disabled"
-        },
         "prefixIcon": {
           "color": "$color.fg.disabled"
         },
@@ -208,7 +190,7 @@
           "minHeight": "$unit.s9",
           "cornerRadius": "$radius.full",
           "gap": "$unit.s1",
-          "paddingX": "$unit.s3_5",
+          "paddingX": "$unit.s4",
           "paddingY": "$unit.s2"
         },
         "prefixIcon": {
diff --git a/docs/public/rootage/index.json b/docs/public/rootage/index.json
index ff9721565..bab77c53b 100644
--- a/docs/public/rootage/index.json
+++ b/docs/public/rootage/index.json
@@ -44,6 +44,9 @@
     {
       "path": "/components/fab.json"
     },
+    {
+      "path": "/components/extended-fab.json"
+    },
     {
       "path": "/components/help-bubble.json"
     },
@@ -59,6 +62,9 @@
     {
       "path": "/components/radio.json"
     },
+    {
+      "path": "/components/reaction-button.json"
+    },
     {
       "path": "/components/switch.json"
     },
diff --git a/docs/registry/registry-ui.ts b/docs/registry/registry-ui.ts
index df2b51998..b214d3d7a 100644
--- a/docs/registry/registry-ui.ts
+++ b/docs/registry/registry-ui.ts
@@ -36,6 +36,11 @@ export const registryUI: RegistryUI = [
     dependencies: ["@radix-ui/react-slot", "@seed-design/react-toggle"],
     files: ["ui:toggle-button.tsx"],
   },
+  {
+    name: "reaction-button",
+    dependencies: ["@radix-ui/react-slot", "@seed-design/react-toggle"],
+    files: ["ui:reaction-button.tsx"],
+  },
   {
     name: "fab",
     dependencies: ["@radix-ui/react-slot"],
diff --git a/docs/registry/ui/reaction-button.tsx b/docs/registry/ui/reaction-button.tsx
new file mode 100644
index 000000000..6431fad3f
--- /dev/null
+++ b/docs/registry/ui/reaction-button.tsx
@@ -0,0 +1,89 @@
+"use client";
+
+import "@seed-design/stylesheet/progressCircle.css";
+import "@seed-design/stylesheet/reactionButton.css";
+
+import { Slot } from "@radix-ui/react-slot";
+import { useToggle, type UseToggleProps } from "@seed-design/react-toggle";
+import {
+  reactionButton,
+  type ReactionButtonVariantProps,
+} from "@seed-design/recipe/reactionButton";
+import clsx from "clsx";
+import * as React from "react";
+import { ProgressCircle } from "./progress-circle";
+
+export interface ReactionButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    UseToggleProps,
+    ReactionButtonVariantProps {
+  prefixIcon?: React.ReactNode;
+
+  count?: number;
+
+  loading?: boolean;
+
+  /**
+   * @default false
+   */
+  asChild?: boolean;
+}
+
+/**
+ * @see https://v3.seed-design.io/docs/react/components/reaction-button
+ */
+export const ReactionButton = React.forwardRef<
+  HTMLButtonElement,
+  ReactionButtonProps
+>(
+  (
+    {
+      className,
+      size = "small",
+      children,
+      prefixIcon,
+      count,
+      loading = false,
+      asChild = false,
+      ...otherProps
+    },
+    ref,
+  ) => {
+    const Comp = asChild ? Slot : "button";
+    const { rootProps, stateProps, restProps } = useToggle(otherProps);
+    const classNames = reactionButton({ size });
+    const dataProps = {
+      ...stateProps,
+      "data-loading": loading ? "" : undefined,
+    };
+
+    return (
+      <Comp
+        ref={ref}
+        className={clsx(classNames.root, className)}
+        {...dataProps}
+        {...rootProps}
+        {...restProps}
+      >
+        {prefixIcon && (
+          <Slot aria-hidden {...dataProps} className={classNames.prefixIcon}>
+            {prefixIcon}
+          </Slot>
+        )}
+        <span {...dataProps} className={classNames.label}>
+          {children}
+        </span>
+        <span {...dataProps} className={classNames.count}>
+          {count}
+        </span>
+        {loading ? (
+          <ProgressCircle
+            {...dataProps}
+            className={classNames.progressCircle}
+          />
+        ) : null}
+      </Comp>
+    );
+  },
+);
+ReactionButton.displayName = "ReactionButton";
diff --git a/docs/stories/ReactionButton.stories.tsx b/docs/stories/ReactionButton.stories.tsx
new file mode 100644
index 000000000..a8abbbe95
--- /dev/null
+++ b/docs/stories/ReactionButton.stories.tsx
@@ -0,0 +1,47 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { ReactionButton } from "seed-design/ui/reaction-button";
+
+import { IconBellFill, IconChevronRightFill } from "@daangn/react-monochrome-icon";
+import { reactionButtonVariantMap } from "@seed-design/recipe/reactionButton";
+import { SeedThemeDecorator } from "./components/decorator";
+import { VariantTable } from "./components/variant-table";
+
+const meta = {
+  component: ReactionButton,
+  decorators: [SeedThemeDecorator],
+} satisfies Meta<typeof ReactionButton>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+const variantMap = {
+  ...reactionButtonVariantMap,
+  disabled: ["false", "true"],
+  loading: ["false", "true"],
+  pressed: ["false", "true"],
+};
+
+const CommonStoryTemplate: Story = {
+  args: {
+    prefixIcon: <IconBellFill />,
+    count: 1,
+  },
+  render: (args) => (
+    <VariantTable
+      Component={meta.component}
+      variantMap={variantMap}
+      render={({ pressed }) => (pressed === "true" ? "선택됨" : "미선택")}
+      {...args}
+    />
+  ),
+};
+
+export const LightTheme = CommonStoryTemplate;
+
+export const DarkTheme = CommonStoryTemplate;
+
+export const FontScalingExtraSmall = CommonStoryTemplate;
+
+export const FontScalingExtraExtraExtraLarge = CommonStoryTemplate;
diff --git a/docs/stories/ToggleButton.stories.tsx b/docs/stories/ToggleButton.stories.tsx
index bfe737313..c9744ef57 100644
--- a/docs/stories/ToggleButton.stories.tsx
+++ b/docs/stories/ToggleButton.stories.tsx
@@ -20,6 +20,7 @@ const variantMap = {
   ...toggleButtonVariantMap,
   disabled: ["false", "true"],
   loading: ["false", "true"],
+  pressed: ["false", "true"],
 };
 
 const CommonStoryTemplate: Story = {
@@ -31,7 +32,7 @@ const CommonStoryTemplate: Story = {
     <VariantTable
       Component={meta.component}
       variantMap={variantMap}
-      render={({ disabled }) => (disabled === "true" ? "Disabled" : "Toggle Button")}
+      render={({ pressed }) => (pressed === "true" ? "선택됨" : "미선택")}
       {...args}
     />
   ),
diff --git a/packages/recipe-generator/core/src/types.ts b/packages/recipe-generator/core/src/types.ts
index 0a88708ea..95942de89 100644
--- a/packages/recipe-generator/core/src/types.ts
+++ b/packages/recipe-generator/core/src/types.ts
@@ -10,9 +10,13 @@ type SVGExtraProperties = {
 
 export type StyleObject = CSS.Properties &
   SVGExtraProperties & {
-    [P in CSS.SimplePseudos as `&${P}`]?: CSS.Properties;
+    [P in CSS.SimplePseudos as `&${P}`]?: CSS.Properties & {
+      [K in string as `--${K}`]?: string;
+    };
   } & {
-    [K in string as `&${K}`]?: CSS.Properties;
+    [K in string as `&${K}`]?: CSS.Properties & {
+      [K in string as `--${K}`]?: string;
+    };
   } & {
     [K in string as `--${K}`]?: string;
   };
diff --git a/packages/recipe-generator/preset/src/checkbox.recipe.ts b/packages/recipe-generator/preset/src/checkbox.recipe.ts
index 59abe1c2d..dcc3434d9 100644
--- a/packages/recipe-generator/preset/src/checkbox.recipe.ts
+++ b/packages/recipe-generator/preset/src/checkbox.recipe.ts
@@ -41,7 +41,6 @@ const checkbox = defineRecipe({
     },
     label: {
       color: vars.base.enabled.label.color,
-      lineHeight: vars.base.enabled.label.lineHeight,
     },
   },
   variants: {
@@ -152,7 +151,8 @@ const checkbox = defineRecipe({
         },
         label: {
           fontSize: vars.sizeLarge.enabled.label.fontSize,
-          marginBlockStart: "7.5px", // 수직 위치 보정
+          lineHeight: vars.sizeLarge.enabled.label.lineHeight,
+          marginBlockStart: "calc(18px - 0.65625rem)", // 수직 위치 보정, 18 - label.lineHeight / 2
         },
       },
       medium: {
@@ -167,7 +167,8 @@ const checkbox = defineRecipe({
         },
         label: {
           fontSize: vars.sizeMedium.enabled.label.fontSize,
-          marginBlockStart: "6.5px", // 수직 위치 보정
+          lineHeight: vars.sizeMedium.enabled.label.lineHeight,
+          marginBlockStart: "calc(16px - 0.59375rem)", // 수직 위치 보정, 16 - label.lineHeight / 2
         },
       },
       small: {
@@ -182,7 +183,8 @@ const checkbox = defineRecipe({
         },
         label: {
           fontSize: vars.sizeSmall.enabled.label.fontSize,
-          marginBlockStart: "5px", // 수직 위치 보정
+          lineHeight: vars.sizeSmall.enabled.label.lineHeight,
+          marginBlockStart: "calc(14px - 0.5625rem)", // 수직 위치 보정, 14 - label.lineHeight / 2
         },
       },
     },
diff --git a/packages/recipe-generator/preset/src/fab.recipe.ts b/packages/recipe-generator/preset/src/fab.recipe.ts
index cbfdcede8..e71932ea8 100644
--- a/packages/recipe-generator/preset/src/fab.recipe.ts
+++ b/packages/recipe-generator/preset/src/fab.recipe.ts
@@ -37,6 +37,8 @@ const fab = defineRecipe({
       display: "inline-flex",
       alignItems: "center",
       justifyContent: "center",
+
+      color: vars.base.enabled.icon.color,
     },
   },
   variants: {
diff --git a/packages/recipe-generator/preset/src/index.ts b/packages/recipe-generator/preset/src/index.ts
index 8a18fe404..06b5f68b6 100644
--- a/packages/recipe-generator/preset/src/index.ts
+++ b/packages/recipe-generator/preset/src/index.ts
@@ -16,6 +16,7 @@ import identityPlaceholder from "./identity-placeholder";
 import inlineBanner from "./inline-banner.recipe";
 import progressCircle from "./progress-circle.recipe";
 import radio from "./radio.recipe";
+import reactionButton from "./reaction-button.recipe";
 import screen from "./screen.recipe";
 import segmentedControl from "./segmented-control.recipe";
 import selectBoxGroup from "./select-box-group.recipe";
@@ -25,7 +26,7 @@ import tab from "./tab.recipe";
 import tabs from "./tabs.recipe";
 import textButton from "./text-button.recipe";
 import textField from "./text-field.recipe";
-import toggleButton from "./toggle-button";
+import toggleButton from "./toggle-button.recipe";
 import topNavigation from "./top-navigation.recipe";
 
 const recipes = {
@@ -33,6 +34,7 @@ const recipes = {
   avatarStack,
   actionButton,
   toggleButton,
+  reactionButton,
   fab,
   extendedFab,
   badge,
diff --git a/packages/recipe-generator/preset/src/reaction-button.recipe.ts b/packages/recipe-generator/preset/src/reaction-button.recipe.ts
new file mode 100644
index 000000000..8c979b1a7
--- /dev/null
+++ b/packages/recipe-generator/preset/src/reaction-button.recipe.ts
@@ -0,0 +1,166 @@
+import { reactionButton as vars } from "@seed-design/vars/component";
+
+import { defineRecipe } from "./helper";
+import { active, pressed, disabled, focus, loading, pseudo } from "./pseudo";
+
+const reactionButton = defineRecipe({
+  name: "reactionButton",
+  slots: ["root", "label", "count", "prefixIcon", "progressCircle"],
+  base: {
+    root: {
+      display: "inline-flex",
+      boxSizing: "border-box",
+      alignItems: "center",
+      justifyContent: "center",
+      cursor: "pointer",
+      border: "none",
+      textTransform: "none",
+      WebkitFontSmoothing: "antialiased",
+      MozOsxFontSmoothing: "grayscale",
+      textDecoration: "none",
+      [pseudo(focus)]: {
+        outline: "none",
+      },
+
+      transition: `background-color ${vars.base.enabled.root.colorDuration} ${vars.base.enabled.root.colorTimingFunction}`,
+      background: vars.base.enabled.root.color,
+      [pseudo(active)]: {
+        background: vars.base.pressed.root.color,
+      },
+      [pseudo(pressed)]: {
+        background: vars.base.selected.root.color,
+        boxShadow: `inset 0 0 0 ${vars.base.selected.root.strokeWidth} ${vars.base.selected.root.strokeColor}`,
+      },
+      [pseudo(pressed, active)]: {
+        background: vars.base.selectedPressed.root.color,
+      },
+      [pseudo(disabled)]: {
+        cursor: "not-allowed",
+        background: vars.base.disabled.root.color,
+        boxShadow: `inset 0 0 0 ${vars.base.disabled.root.strokeWidth} ${vars.base.selected.root.strokeColor}`,
+      },
+      [pseudo(loading)]: {
+        background: vars.base.loading.root.color,
+      },
+      [pseudo(pressed, loading)]: {
+        background: vars.base.selectedLoading.root.color,
+        boxShadow: `inset 0 0 0 ${vars.base.selectedLoading.root.strokeWidth} ${vars.base.selected.root.strokeColor}`,
+      },
+    },
+    label: {
+      fontWeight: vars.base.enabled.label.fontWeight,
+      color: vars.base.enabled.label.color,
+      [pseudo(pressed)]: {
+        color: vars.base.selected.label.color,
+      },
+      [pseudo(disabled)]: {
+        color: vars.base.disabled.label.color,
+      },
+      [pseudo(loading)]: {
+        opacity: 0,
+      },
+    },
+    count: {
+      fontWeight: vars.base.enabled.count.fontWeight,
+      color: vars.base.enabled.count.color,
+      [pseudo(pressed)]: {
+        color: vars.base.selected.count.color,
+      },
+      [pseudo(disabled)]: {
+        color: vars.base.disabled.count.color,
+      },
+      [pseudo(loading)]: {
+        opacity: 0,
+      },
+    },
+    prefixIcon: {
+      display: "inline-flex",
+      alignItems: "center",
+      justifyContent: "center",
+
+      color: vars.base.enabled.prefixIcon.color,
+      [pseudo(pressed)]: {
+        color: vars.base.selected.prefixIcon.color,
+      },
+      [pseudo(disabled)]: {
+        color: vars.base.disabled.prefixIcon.color,
+      },
+      [pseudo(loading)]: {
+        opacity: 0,
+      },
+    },
+    progressCircle: {
+      position: "absolute",
+      display: "none",
+
+      "--track-color": vars.base.enabled.progressCircle.trackColor,
+      "--range-color": vars.base.enabled.progressCircle.rangeColor,
+      [pseudo(pressed)]: {
+        "--track-color": vars.base.selected.progressCircle.trackColor,
+        "--range-color": vars.base.selected.progressCircle.rangeColor,
+      },
+      [pseudo(loading)]: {
+        display: "flex",
+      },
+    },
+  },
+  variants: {
+    size: {
+      xsmall: {
+        root: {
+          height: vars.sizeXsmall.enabled.root.minHeight,
+          borderRadius: vars.sizeXsmall.enabled.root.cornerRadius,
+          gap: vars.sizeXsmall.enabled.root.gap,
+          paddingInline: vars.sizeXsmall.enabled.root.paddingX,
+          paddingBlock: vars.sizeXsmall.enabled.root.paddingY,
+        },
+        label: {
+          fontSize: vars.sizeXsmall.enabled.label.fontSize,
+          lineHeight: vars.sizeXsmall.enabled.label.lineHeight,
+        },
+        count: {
+          fontSize: vars.sizeXsmall.enabled.count.fontSize,
+          lineHeight: vars.sizeXsmall.enabled.count.lineHeight,
+        },
+        prefixIcon: {
+          width: vars.sizeXsmall.enabled.prefixIcon.size,
+          height: vars.sizeXsmall.enabled.prefixIcon.size,
+        },
+        progressCircle: {
+          "--size": vars.sizeXsmall.enabled.progressCircle.size,
+          "--thickness": vars.sizeXsmall.enabled.progressCircle.thickness,
+        },
+      },
+      small: {
+        root: {
+          height: vars.sizeSmall.enabled.root.minHeight,
+          borderRadius: vars.sizeSmall.enabled.root.cornerRadius,
+          gap: vars.sizeSmall.enabled.root.gap,
+          paddingInline: vars.sizeSmall.enabled.root.paddingX,
+          paddingBlock: vars.sizeSmall.enabled.root.paddingY,
+        },
+        label: {
+          fontSize: vars.sizeSmall.enabled.label.fontSize,
+          lineHeight: vars.sizeSmall.enabled.label.lineHeight,
+        },
+        count: {
+          fontSize: vars.sizeSmall.enabled.count.fontSize,
+          lineHeight: vars.sizeSmall.enabled.count.lineHeight,
+        },
+        prefixIcon: {
+          width: vars.sizeSmall.enabled.prefixIcon.size,
+          height: vars.sizeSmall.enabled.prefixIcon.size,
+        },
+        progressCircle: {
+          "--size": vars.sizeSmall.enabled.progressCircle.size,
+          "--thickness": vars.sizeSmall.enabled.progressCircle.thickness,
+        },
+      },
+    },
+  },
+  defaultVariants: {
+    size: "small",
+  },
+});
+
+export default reactionButton;
diff --git a/packages/recipe-generator/preset/src/toggle-button.ts b/packages/recipe-generator/preset/src/toggle-button.recipe.ts
similarity index 90%
rename from packages/recipe-generator/preset/src/toggle-button.ts
rename to packages/recipe-generator/preset/src/toggle-button.recipe.ts
index 2d9f7dcad..3fc17b21f 100644
--- a/packages/recipe-generator/preset/src/toggle-button.ts
+++ b/packages/recipe-generator/preset/src/toggle-button.recipe.ts
@@ -5,7 +5,7 @@ import { active, pressed, disabled, focus, loading, pseudo } from "./pseudo";
 
 const toggleButton = defineRecipe({
   name: "toggleButton",
-  slots: ["root", "label", "icon", "prefixIcon", "suffixIcon", "progressCircle"],
+  slots: ["root", "label", "prefixIcon", "suffixIcon", "progressCircle"],
   base: {
     root: {
       display: "inline-flex",
@@ -26,18 +26,9 @@ const toggleButton = defineRecipe({
       },
 
       transition: `background-color ${vars.base.enabled.root.colorDuration} ${vars.base.enabled.root.colorTimingFunction}`,
-
-      fontWeight: vars.base.enabled.label.fontWeight,
     },
     label: {
-      [pseudo(loading)]: {
-        opacity: 0,
-      },
-    },
-    icon: {
-      display: "inline-flex",
-      alignItems: "center",
-      justifyContent: "center",
+      fontWeight: vars.base.enabled.label.fontWeight,
 
       [pseudo(loading)]: {
         opacity: 0,
@@ -103,15 +94,6 @@ const toggleButton = defineRecipe({
             color: vars.variantBrandSolid.disabled.label.color,
           },
         },
-        icon: {
-          color: vars.variantBrandSolid.enabled.icon.color,
-          [pseudo(pressed)]: {
-            color: vars.variantBrandSolid.selected.icon.color,
-          },
-          [pseudo(disabled)]: {
-            color: vars.variantBrandSolid.disabled.icon.color,
-          },
-        },
         prefixIcon: {
           color: vars.variantBrandSolid.enabled.prefixIcon.color,
           [pseudo(pressed)]: {
@@ -170,15 +152,6 @@ const toggleButton = defineRecipe({
             color: vars.variantNeutralWeak.disabled.label.color,
           },
         },
-        icon: {
-          color: vars.variantNeutralWeak.enabled.icon.color,
-          [pseudo(pressed)]: {
-            color: vars.variantNeutralWeak.selected.icon.color,
-          },
-          [pseudo(disabled)]: {
-            color: vars.variantNeutralWeak.disabled.icon.color,
-          },
-        },
         prefixIcon: {
           color: vars.variantNeutralWeak.enabled.prefixIcon.color,
           [pseudo(pressed)]: {
diff --git a/packages/recipe/lib/reactionButton.d.ts b/packages/recipe/lib/reactionButton.d.ts
new file mode 100644
index 000000000..af0b36616
--- /dev/null
+++ b/packages/recipe/lib/reactionButton.d.ts
@@ -0,0 +1,20 @@
+interface ReactionButtonVariant {
+  /**
+  * @default small
+  */
+  size: "xsmall" | "small";
+}
+
+type ReactionButtonVariantMap = {
+  [key in keyof ReactionButtonVariant]: Array<ReactionButtonVariant[key]>;
+};
+
+export type ReactionButtonVariantProps = Partial<ReactionButtonVariant>;
+
+export type ReactionButtonSlotName = "root" | "label" | "count" | "prefixIcon" | "progressCircle";
+
+export const reactionButtonVariantMap: ReactionButtonVariantMap;
+
+export function reactionButton(
+  props?: ReactionButtonVariantProps,
+): Record<ReactionButtonSlotName, string>;
\ No newline at end of file
diff --git a/packages/recipe/lib/reactionButton.mjs b/packages/recipe/lib/reactionButton.mjs
new file mode 100644
index 000000000..10a97ebf9
--- /dev/null
+++ b/packages/recipe/lib/reactionButton.mjs
@@ -0,0 +1,50 @@
+import { createClassName } from "./className.mjs";
+
+const reactionButtonSlotNames = [
+  [
+    "root",
+    "reactionButton__root"
+  ],
+  [
+    "label",
+    "reactionButton__label"
+  ],
+  [
+    "count",
+    "reactionButton__count"
+  ],
+  [
+    "prefixIcon",
+    "reactionButton__prefixIcon"
+  ],
+  [
+    "progressCircle",
+    "reactionButton__progressCircle"
+  ]
+];
+
+const defaultVariant = {
+  "size": "small"
+};
+
+const compoundVariants = [];
+
+export const reactionButtonVariantMap = {
+  "size": [
+    "xsmall",
+    "small"
+  ]
+};
+
+export const reactionButtonVariantKeys = Object.keys(reactionButtonVariantMap);
+
+export function reactionButton(props) {
+  return Object.fromEntries(
+    reactionButtonSlotNames.map(([slot, className]) => {
+      return [
+        slot,
+        createClassName(className, { ...defaultVariant, ...props }, compoundVariants),
+      ];
+    }),
+  );
+}
\ No newline at end of file
diff --git a/packages/recipe/lib/toggleButton.d.ts b/packages/recipe/lib/toggleButton.d.ts
index c5830a5e5..becd5b678 100644
--- a/packages/recipe/lib/toggleButton.d.ts
+++ b/packages/recipe/lib/toggleButton.d.ts
@@ -15,7 +15,7 @@ type ToggleButtonVariantMap = {
 
 export type ToggleButtonVariantProps = Partial<ToggleButtonVariant>;
 
-export type ToggleButtonSlotName = "root" | "label" | "icon" | "prefixIcon" | "suffixIcon" | "progressCircle";
+export type ToggleButtonSlotName = "root" | "label" | "prefixIcon" | "suffixIcon" | "progressCircle";
 
 export const toggleButtonVariantMap: ToggleButtonVariantMap;
 
diff --git a/packages/recipe/lib/toggleButton.mjs b/packages/recipe/lib/toggleButton.mjs
index e7d74793d..d1d23e680 100644
--- a/packages/recipe/lib/toggleButton.mjs
+++ b/packages/recipe/lib/toggleButton.mjs
@@ -9,10 +9,6 @@ const toggleButtonSlotNames = [
     "label",
     "toggleButton__label"
   ],
-  [
-    "icon",
-    "toggleButton__icon"
-  ],
   [
     "prefixIcon",
     "toggleButton__prefixIcon"
diff --git a/packages/rootage/artifacts/components/checkbox.yaml b/packages/rootage/artifacts/components/checkbox.yaml
index 5ccc19834..0475fc753 100644
--- a/packages/rootage/artifacts/components/checkbox.yaml
+++ b/packages/rootage/artifacts/components/checkbox.yaml
@@ -9,7 +9,6 @@ data:
     enabled:
       label:
         color: $color.fg.neutral
-        lineHeight: $line-height.s5
       root:
         gap: $unit.s2
     bold:
@@ -75,7 +74,7 @@ data:
   size=small:
     enabled:
       root:
-        minHeight: $unit.s8
+        minHeight: $unit.s7
       label:
         fontSize: $font-size.s3
         lineHeight: $line-height.s3
diff --git a/packages/rootage/artifacts/components/reaction-button.yaml b/packages/rootage/artifacts/components/reaction-button.yaml
new file mode 100644
index 000000000..75077baee
--- /dev/null
+++ b/packages/rootage/artifacts/components/reaction-button.yaml
@@ -0,0 +1,98 @@
+# yaml-language-server: $schema=./schema.json
+kind: ComponentSpec
+metadata:
+  id: reaction-button
+  name: Reaction Button
+data:
+  base:
+    enabled:
+      root:
+        color: $color.bg.neutral-weak
+        colorDuration: $duration.s4
+        colorTimingFunction: $timing-function.easing
+      label:
+        color: $color.fg.neutral
+        fontWeight: $font-weight.medium
+      count:
+        color: $color.fg.neutral
+        fontWeight: $font-weight.bold
+      prefixIcon:
+        color: $color.fg.neutral
+      progressCircle:
+        trackColor: $color.palette.gray-500
+        rangeColor: $color.fg.neutral
+    pressed:
+      root:
+        color: $color.bg.neutral-weak-pressed
+    selected:
+      root:
+        color: $color.bg.layer-default
+        strokeColor: $color.stroke.brand
+        strokeWidth: 1px
+      label:
+        color: $color.fg.brand
+      count:
+        color: $color.fg.brand
+      prefixIcon:
+        color: $color.fg.brand
+      progressCircle:
+        trackColor: $color.palette.carrot-200
+        rangeColor: $color.fg.brand
+    selected,pressed:
+      root:
+        color: $color.bg.layer-default-pressed
+    disabled:
+      root:
+        color: $color.bg.disabled
+        strokeWidth: 0px
+      label:
+        color: $color.fg.disabled
+      count:
+        color: $color.fg.disabled
+      prefixIcon:
+        color: $color.fg.disabled
+    loading:
+      root:
+        color: $color.bg.neutral-weak-pressed
+    selected,loading:
+      root:
+        color: $color.bg.layer-default-pressed
+        strokeWidth: 1px
+  size=xsmall:
+    enabled:
+      root:
+        minHeight: $unit.s8
+        cornerRadius: $radius.full
+        gap: $unit.s1
+        paddingX: $unit.s3
+        paddingY: $unit.s1_5
+      prefixIcon:
+        size: 18px
+      label:
+        fontSize: $font-size.s3
+        lineHeight: $line-height.s3
+      count:
+        fontSize: $font-size.s3
+        lineHeight: $line-height.s3
+      progressCircle:
+        size: 14px
+        thickness: 2px
+  size=small:
+    enabled:
+      root:
+        minHeight: $unit.s9
+        cornerRadius: $radius.full
+        gap: $unit.s1
+        paddingX: $unit.s3_5
+        paddingY: $unit.s2
+      prefixIcon:
+        size: 18px
+      label:
+        fontSize: $font-size.s3
+        lineHeight: $line-height.s3
+      count:
+        fontSize: $font-size.s3
+        lineHeight: $line-height.s3
+      progressCircle:
+        size: 14px
+        thickness: 2px
diff --git a/packages/rootage/artifacts/components/toggle-button.yaml b/packages/rootage/artifacts/components/toggle-button.yaml
index 90adde995..f674bc409 100644
--- a/packages/rootage/artifacts/components/toggle-button.yaml
+++ b/packages/rootage/artifacts/components/toggle-button.yaml
@@ -17,8 +17,6 @@ data:
         color: $color.bg.brand-solid
       label:
         color: $color.fg.static-white
-      icon:
-        color: $color.fg.static-white
       prefixIcon:
         color: $color.fg.static-white
       suffixIcon:
@@ -34,8 +32,6 @@ data:
         color: $color.bg.neutral-weak
       label:
         color: $color.fg.neutral
-      icon:
-        color: $color.fg.neutral
       prefixIcon:
         color: $color.fg.neutral
       suffixIcon:
@@ -51,8 +47,6 @@ data:
         color: $color.bg.disabled
       label:
         color: $color.fg.disabled
-      icon:
-        color: $color.fg.disabled
       prefixIcon:
         color: $color.fg.disabled
       suffixIcon:
@@ -69,8 +63,6 @@ data:
         color: $color.bg.neutral-weak
       label:
         color: $color.fg.neutral
-      icon:
-        color: $color.fg.neutral
       prefixIcon:
         color: $color.fg.neutral
       suffixIcon:
@@ -86,8 +78,6 @@ data:
         color: $color.bg.neutral-weak
       label:
         color: $color.fg.neutral
-      icon:
-        color: $color.fg.neutral
       prefixIcon:
         color: $color.fg.neutral
       suffixIcon:
@@ -103,8 +93,6 @@ data:
         color: $color.bg.disabled
       label:
         color: $color.fg.disabled
-      icon:
-        color: $color.fg.disabled
       prefixIcon:
         color: $color.fg.disabled
       suffixIcon:
@@ -138,7 +126,7 @@ data:
         minHeight: $unit.s9
         cornerRadius: $radius.full
         gap: $unit.s1
-        paddingX: $unit.s3_5
+        paddingX: $unit.s4
         paddingY: $unit.s2
       prefixIcon:
         size: $unit.s3_5
diff --git a/packages/stylesheet/checkbox.css b/packages/stylesheet/checkbox.css
index 26b6be18e..91ec2963b 100644
--- a/packages/stylesheet/checkbox.css
+++ b/packages/stylesheet/checkbox.css
@@ -31,7 +31,6 @@
 }
 .checkbox__label {
     color: var(--seed-v3-color-fg-neutral);
-    line-height: var(--seed-v3-line-height-s5);
 }
 .checkbox__label--bold_true {
     font-weight: var(--seed-v3-font-weight-bold);
@@ -114,7 +113,8 @@
 }
 .checkbox__label--size_large {
     font-size: var(--seed-v3-font-size-s5);
-    margin-block-start: 7.5px;
+    line-height: var(--seed-v3-line-height-s5);
+    margin-block-start: calc(18px - 0.65625rem);
 }
 .checkbox__root--size_medium {
     min-height: var(--seed-v3-unit-s8);
@@ -127,20 +127,22 @@
 }
 .checkbox__label--size_medium {
     font-size: var(--seed-v3-font-size-s4);
-    margin-block-start: 6.5px;
+    line-height: var(--seed-v3-line-height-s4);
+    margin-block-start: calc(16px - 0.59375rem);
 }
 .checkbox__root--size_small {
-    min-height: var(--seed-v3-unit-s8);
+    min-height: var(--seed-v3-unit-s7);
 }
 .checkbox__control--size_small {
     border-radius: var(--seed-v3-radius-s1);
     width: var(--seed-v3-unit-s4);
     height: var(--seed-v3-unit-s4);
-    margin: calc((var(--seed-v3-unit-s8) - var(--seed-v3-unit-s4)) / 2) 0;
+    margin: calc((var(--seed-v3-unit-s7) - var(--seed-v3-unit-s4)) / 2) 0;
 }
 .checkbox__label--size_small {
     font-size: var(--seed-v3-font-size-s3);
-    margin-block-start: 5px;
+    line-height: var(--seed-v3-line-height-s3);
+    margin-block-start: calc(14px - 0.5625rem);
 }
 .checkbox__icon--size_small-variant_ghost {
     width: 13.5px;
diff --git a/packages/stylesheet/fab.css b/packages/stylesheet/fab.css
index 715e46c9f..d33e20e01 100644
--- a/packages/stylesheet/fab.css
+++ b/packages/stylesheet/fab.css
@@ -28,6 +28,7 @@
     display: inline-flex;
     align-items: center;
     justify-content: center;
+    color: var(--seed-v3-color-fg-neutral);
 }
 .fab__root--size_small {
     width: 40px;
diff --git a/packages/stylesheet/reactionButton.css b/packages/stylesheet/reactionButton.css
new file mode 100644
index 000000000..6c483ba81
--- /dev/null
+++ b/packages/stylesheet/reactionButton.css
@@ -0,0 +1,141 @@
+.reactionButton__root {
+    display: inline-flex;
+    box-sizing: border-box;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    border: none;
+    text-transform: none;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    text-decoration: none;
+}
+.reactionButton__root:is(:focus, [data-focus]) {
+    outline: none;
+}
+.reactionButton__root {
+    transition: background-color var(--seed-v3-duration-s4) var(--seed-v3-timing-function-easing);
+    background: var(--seed-v3-color-bg-neutral-weak);
+}
+.reactionButton__root:is(:active, [data-active]) {
+    background: var(--seed-v3-color-bg-neutral-weak-pressed);
+}
+.reactionButton__root:is([aria-pressed=true], [data-pressed]) {
+    background: var(--seed-v3-color-bg-layer-default);
+    box-shadow: inset 0 0 0 1px var(--seed-v3-color-stroke-brand);
+}
+.reactionButton__root:is([aria-pressed=true], [data-pressed]):is(:active, [data-active]) {
+    background: var(--seed-v3-color-bg-layer-default-pressed);
+}
+.reactionButton__root:is(:disabled, [disabled], [data-disabled]) {
+    cursor: not-allowed;
+    background: var(--seed-v3-color-bg-disabled);
+    box-shadow: inset 0 0 0 0px var(--seed-v3-color-stroke-brand);
+}
+.reactionButton__root[data-loading] {
+    background: var(--seed-v3-color-bg-neutral-weak-pressed);
+}
+.reactionButton__root:is([aria-pressed=true], [data-pressed])[data-loading] {
+    background: var(--seed-v3-color-bg-layer-default-pressed);
+    box-shadow: inset 0 0 0 1px var(--seed-v3-color-stroke-brand);
+}
+.reactionButton__label {
+    font-weight: var(--seed-v3-font-weight-medium);
+    color: var(--seed-v3-color-fg-neutral);
+}
+.reactionButton__label:is([aria-pressed=true], [data-pressed]) {
+    color: var(--seed-v3-color-fg-brand);
+}
+.reactionButton__label:is(:disabled, [disabled], [data-disabled]) {
+    color: var(--seed-v3-color-fg-disabled);
+}
+.reactionButton__label[data-loading] {
+    opacity: 0;
+}
+.reactionButton__count {
+    font-weight: var(--seed-v3-font-weight-bold);
+    color: var(--seed-v3-color-fg-neutral);
+}
+.reactionButton__count:is([aria-pressed=true], [data-pressed]) {
+    color: var(--seed-v3-color-fg-brand);
+}
+.reactionButton__count:is(:disabled, [disabled], [data-disabled]) {
+    color: var(--seed-v3-color-fg-disabled);
+}
+.reactionButton__count[data-loading] {
+    opacity: 0;
+}
+.reactionButton__prefixIcon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--seed-v3-color-fg-neutral);
+}
+.reactionButton__prefixIcon:is([aria-pressed=true], [data-pressed]) {
+    color: var(--seed-v3-color-fg-brand);
+}
+.reactionButton__prefixIcon:is(:disabled, [disabled], [data-disabled]) {
+    color: var(--seed-v3-color-fg-disabled);
+}
+.reactionButton__prefixIcon[data-loading] {
+    opacity: 0;
+}
+.reactionButton__progressCircle {
+    position: absolute;
+    display: none;
+    --track-color: var(--seed-v3-color-palette-gray-500);
+    --range-color: var(--seed-v3-color-fg-neutral);
+}
+.reactionButton__progressCircle:is([aria-pressed=true], [data-pressed]) {
+    --track-color: var(--seed-v3-color-palette-carrot-200);
+    --range-color: var(--seed-v3-color-fg-brand);
+}
+.reactionButton__progressCircle[data-loading] {
+    display: flex;
+}
+.reactionButton__root--size_xsmall {
+    height: var(--seed-v3-unit-s8);
+    border-radius: var(--seed-v3-radius-full);
+    gap: var(--seed-v3-unit-s1);
+    padding-inline: var(--seed-v3-unit-s3);
+    padding-block: var(--seed-v3-unit-s1_5);
+}
+.reactionButton__label--size_xsmall {
+    font-size: var(--seed-v3-font-size-s3);
+    line-height: var(--seed-v3-line-height-s3);
+}
+.reactionButton__count--size_xsmall {
+    font-size: var(--seed-v3-font-size-s3);
+    line-height: var(--seed-v3-line-height-s3);
+}
+.reactionButton__prefixIcon--size_xsmall {
+    width: 18px;
+    height: 18px;
+}
+.reactionButton__progressCircle--size_xsmall {
+    --size: 14px;
+    --thickness: 2px;
+}
+.reactionButton__root--size_small {
+    height: var(--seed-v3-unit-s9);
+    border-radius: var(--seed-v3-radius-full);
+    gap: var(--seed-v3-unit-s1);
+    padding-inline: var(--seed-v3-unit-s3_5);
+    padding-block: var(--seed-v3-unit-s2);
+}
+.reactionButton__label--size_small {
+    font-size: var(--seed-v3-font-size-s3);
+    line-height: var(--seed-v3-line-height-s3);
+}
+.reactionButton__count--size_small {
+    font-size: var(--seed-v3-font-size-s3);
+    line-height: var(--seed-v3-line-height-s3);
+}
+.reactionButton__prefixIcon--size_small {
+    width: 18px;
+    height: 18px;
+}
+.reactionButton__progressCircle--size_small {
+    --size: 14px;
+    --thickness: 2px;
+}
\ No newline at end of file
diff --git a/packages/stylesheet/toggleButton.css b/packages/stylesheet/toggleButton.css
index 0970ef250..3496a61dd 100644
--- a/packages/stylesheet/toggleButton.css
+++ b/packages/stylesheet/toggleButton.css
@@ -18,19 +18,13 @@
 }
 .toggleButton__root {
     transition: background-color var(--seed-v3-duration-s4) var(--seed-v3-timing-function-easing);
+}
+.toggleButton__label {
     font-weight: var(--seed-v3-font-weight-bold);
 }
 .toggleButton__label[data-loading] {
     opacity: 0;
 }
-.toggleButton__icon {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-}
-.toggleButton__icon[data-loading] {
-    opacity: 0;
-}
 .toggleButton__prefixIcon {
     display: inline-flex;
     align-items: center;
@@ -84,15 +78,6 @@
 .toggleButton__label--variant_brandSolid:is(:disabled, [disabled], [data-disabled]) {
     color: var(--seed-v3-color-fg-disabled);
 }
-.toggleButton__icon--variant_brandSolid {
-    color: var(--seed-v3-color-fg-static-white);
-}
-.toggleButton__icon--variant_brandSolid:is([aria-pressed=true], [data-pressed]) {
-    color: var(--seed-v3-color-fg-neutral);
-}
-.toggleButton__icon--variant_brandSolid:is(:disabled, [disabled], [data-disabled]) {
-    color: var(--seed-v3-color-fg-disabled);
-}
 .toggleButton__prefixIcon--variant_brandSolid {
     color: var(--seed-v3-color-fg-static-white);
 }
@@ -149,15 +134,6 @@
 .toggleButton__label--variant_neutralWeak:is(:disabled, [disabled], [data-disabled]) {
     color: var(--seed-v3-color-fg-disabled);
 }
-.toggleButton__icon--variant_neutralWeak {
-    color: var(--seed-v3-color-fg-neutral);
-}
-.toggleButton__icon--variant_neutralWeak:is([aria-pressed=true], [data-pressed]) {
-    color: var(--seed-v3-color-fg-neutral);
-}
-.toggleButton__icon--variant_neutralWeak:is(:disabled, [disabled], [data-disabled]) {
-    color: var(--seed-v3-color-fg-disabled);
-}
 .toggleButton__prefixIcon--variant_neutralWeak {
     color: var(--seed-v3-color-fg-neutral);
 }
@@ -210,7 +186,7 @@
     height: var(--seed-v3-unit-s9);
     border-radius: var(--seed-v3-radius-full);
     gap: var(--seed-v3-unit-s1);
-    padding-inline: var(--seed-v3-unit-s3_5);
+    padding-inline: var(--seed-v3-unit-s4);
     padding-block: var(--seed-v3-unit-s2);
 }
 .toggleButton__label--size_small {
diff --git a/packages/vars/lib/component/checkbox.d.ts b/packages/vars/lib/component/checkbox.d.ts
index 2f7d863e8..60fdb9ad8 100644
--- a/packages/vars/lib/component/checkbox.d.ts
+++ b/packages/vars/lib/component/checkbox.d.ts
@@ -2,8 +2,7 @@ export declare const vars: {
   "base": {
     "enabled": {
       "label": {
-        "color": "var(--seed-v3-color-fg-neutral)",
-        "lineHeight": "var(--seed-v3-line-height-s5)"
+        "color": "var(--seed-v3-color-fg-neutral)"
       },
       "root": {
         "gap": "var(--seed-v3-unit-s2)"
@@ -105,7 +104,7 @@ export declare const vars: {
   "sizeSmall": {
     "enabled": {
       "root": {
-        "minHeight": "var(--seed-v3-unit-s8)"
+        "minHeight": "var(--seed-v3-unit-s7)"
       },
       "label": {
         "fontSize": "var(--seed-v3-font-size-s3)",
diff --git a/packages/vars/lib/component/checkbox.mjs b/packages/vars/lib/component/checkbox.mjs
index 92f53645e..df8d1db03 100644
--- a/packages/vars/lib/component/checkbox.mjs
+++ b/packages/vars/lib/component/checkbox.mjs
@@ -2,8 +2,7 @@ export const vars = {
   "base": {
     "enabled": {
       "label": {
-        "color": "var(--seed-v3-color-fg-neutral)",
-        "lineHeight": "var(--seed-v3-line-height-s5)"
+        "color": "var(--seed-v3-color-fg-neutral)"
       },
       "root": {
         "gap": "var(--seed-v3-unit-s2)"
@@ -105,7 +104,7 @@ export const vars = {
   "sizeSmall": {
     "enabled": {
       "root": {
-        "minHeight": "var(--seed-v3-unit-s8)"
+        "minHeight": "var(--seed-v3-unit-s7)"
       },
       "label": {
         "fontSize": "var(--seed-v3-font-size-s3)",
diff --git a/packages/vars/lib/component/index.d.ts b/packages/vars/lib/component/index.d.ts
index cffeb24ec..fa26611eb 100644
--- a/packages/vars/lib/component/index.d.ts
+++ b/packages/vars/lib/component/index.d.ts
@@ -16,6 +16,7 @@ export { vars as identityPlaceholder } from "./identity-placeholder";
 export { vars as inlineBanner } from "./inline-banner";
 export { vars as progressCircle } from "./progress-circle";
 export { vars as radio } from "./radio";
+export { vars as reactionButton } from "./reaction-button";
 export { vars as segmentedControl } from "./segmented-control";
 export { vars as selectBoxGroup } from "./select-box-group";
 export { vars as skeleton } from "./skeleton";
diff --git a/packages/vars/lib/component/index.mjs b/packages/vars/lib/component/index.mjs
index 8fd0f8d5e..ebe300829 100644
--- a/packages/vars/lib/component/index.mjs
+++ b/packages/vars/lib/component/index.mjs
@@ -16,6 +16,7 @@ export { vars as identityPlaceholder } from "./identity-placeholder.mjs";
 export { vars as inlineBanner } from "./inline-banner.mjs";
 export { vars as progressCircle } from "./progress-circle.mjs";
 export { vars as radio } from "./radio.mjs";
+export { vars as reactionButton } from "./reaction-button.mjs";
 export { vars as segmentedControl } from "./segmented-control.mjs";
 export { vars as selectBoxGroup } from "./select-box-group.mjs";
 export { vars as skeleton } from "./skeleton.mjs";
diff --git a/packages/vars/lib/component/reaction-button.d.ts b/packages/vars/lib/component/reaction-button.d.ts
new file mode 100644
index 000000000..1190d61cd
--- /dev/null
+++ b/packages/vars/lib/component/reaction-button.d.ts
@@ -0,0 +1,134 @@
+export declare const vars: {
+  "base": {
+    "enabled": {
+      "root": {
+        "color": "var(--seed-v3-color-bg-neutral-weak)",
+        "colorDuration": "var(--seed-v3-duration-s4)",
+        "colorTimingFunction": "var(--seed-v3-timing-function-easing)"
+      },
+      "label": {
+        "color": "var(--seed-v3-color-fg-neutral)",
+        "fontWeight": "var(--seed-v3-font-weight-medium)"
+      },
+      "count": {
+        "color": "var(--seed-v3-color-fg-neutral)",
+        "fontWeight": "var(--seed-v3-font-weight-bold)"
+      },
+      "prefixIcon": {
+        "color": "var(--seed-v3-color-fg-neutral)"
+      },
+      "progressCircle": {
+        "trackColor": "var(--seed-v3-color-palette-gray-500)",
+        "rangeColor": "var(--seed-v3-color-fg-neutral)"
+      }
+    },
+    "pressed": {
+      "root": {
+        "color": "var(--seed-v3-color-bg-neutral-weak-pressed)"
+      }
+    },
+    "selected": {
+      "root": {
+        "color": "var(--seed-v3-color-bg-layer-default)",
+        "strokeColor": "var(--seed-v3-color-stroke-brand)",
+        "strokeWidth": "1px"
+      },
+      "label": {
+        "color": "var(--seed-v3-color-fg-brand)"
+      },
+      "count": {
+        "color": "var(--seed-v3-color-fg-brand)"
+      },
+      "prefixIcon": {
+        "color": "var(--seed-v3-color-fg-brand)"
+      },
+      "progressCircle": {
+        "trackColor": "var(--seed-v3-color-palette-carrot-200)",
+        "rangeColor": "var(--seed-v3-color-fg-brand)"
+      }
+    },
+    "selectedPressed": {
+      "root": {
+        "color": "var(--seed-v3-color-bg-layer-default-pressed)"
+      }
+    },
+    "disabled": {
+      "root": {
+        "color": "var(--seed-v3-color-bg-disabled)",
+        "strokeWidth": "0px"
+      },
+      "label": {
+        "color": "var(--seed-v3-color-fg-disabled)"
+      },
+      "count": {
+        "color": "var(--seed-v3-color-fg-disabled)"
+      },
+      "prefixIcon": {
+        "color": "var(--seed-v3-color-fg-disabled)"
+      }
+    },
+    "loading": {
+      "root": {
+        "color": "var(--seed-v3-color-bg-neutral-weak-pressed)"
+      }
+    },
+    "selectedLoading": {
+      "root": {
+        "color": "var(--seed-v3-color-bg-layer-default-pressed)",
+        "strokeWidth": "1px"
+      }
+    }
+  },
+  "sizeXsmall": {
+    "enabled": {
+      "root": {
+        "minHeight": "var(--seed-v3-unit-s8)",
+        "cornerRadius": "var(--seed-v3-radius-full)",
+        "gap": "var(--seed-v3-unit-s1)",
+        "paddingX": "var(--seed-v3-unit-s3)",
+        "paddingY": "var(--seed-v3-unit-s1_5)"
+      },
+      "prefixIcon": {
+        "size": "18px"
+      },
+      "label": {
+        "fontSize": "var(--seed-v3-font-size-s3)",
+        "lineHeight": "var(--seed-v3-line-height-s3)"
+      },
+      "count": {
+        "fontSize": "var(--seed-v3-font-size-s3)",
+        "lineHeight": "var(--seed-v3-line-height-s3)"
+      },
+      "progressCircle": {
+        "size": "14px",
+        "thickness": "2px"
+      }
+    }
+  },
+  "sizeSmall": {
+    "enabled": {
+      "root": {
+        "minHeight": "var(--seed-v3-unit-s9)",
+        "cornerRadius": "var(--seed-v3-radius-full)",
+        "gap": "var(--seed-v3-unit-s1)",
+        "paddingX": "var(--seed-v3-unit-s3_5)",
+        "paddingY": "var(--seed-v3-unit-s2)"
+      },
+      "prefixIcon": {
+        "size": "18px"
+      },
+      "label": {
+        "fontSize": "var(--seed-v3-font-size-s3)",
+        "lineHeight": "var(--seed-v3-line-height-s3)"
+      },
+      "count": {
+        "fontSize": "var(--seed-v3-font-size-s3)",
+        "lineHeight": "var(--seed-v3-line-height-s3)"
+      },
+      "progressCircle": {
+        "size": "14px",
+        "thickness": "2px"
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/packages/vars/lib/component/reaction-button.mjs b/packages/vars/lib/component/reaction-button.mjs
new file mode 100644
index 000000000..9c33c69f5
--- /dev/null
+++ b/packages/vars/lib/component/reaction-button.mjs
@@ -0,0 +1,134 @@
+export const vars = {
+  "base": {
+    "enabled": {
+      "root": {
+        "color": "var(--seed-v3-color-bg-neutral-weak)",
+        "colorDuration": "var(--seed-v3-duration-s4)",
+        "colorTimingFunction": "var(--seed-v3-timing-function-easing)"
+      },
+      "label": {
+        "color": "var(--seed-v3-color-fg-neutral)",
+        "fontWeight": "var(--seed-v3-font-weight-medium)"
+      },
+      "count": {
+        "color": "var(--seed-v3-color-fg-neutral)",
+        "fontWeight": "var(--seed-v3-font-weight-bold)"
+      },
+      "prefixIcon": {
+        "color": "var(--seed-v3-color-fg-neutral)"
+      },
+      "progressCircle": {
+        "trackColor": "var(--seed-v3-color-palette-gray-500)",
+        "rangeColor": "var(--seed-v3-color-fg-neutral)"
+      }
+    },
+    "pressed": {
+      "root": {
+        "color": "var(--seed-v3-color-bg-neutral-weak-pressed)"
+      }
+    },
+    "selected": {
+      "root": {
+        "color": "var(--seed-v3-color-bg-layer-default)",
+        "strokeColor": "var(--seed-v3-color-stroke-brand)",
+        "strokeWidth": "1px"
+      },
+      "label": {
+        "color": "var(--seed-v3-color-fg-brand)"
+      },
+      "count": {
+        "color": "var(--seed-v3-color-fg-brand)"
+      },
+      "prefixIcon": {
+        "color": "var(--seed-v3-color-fg-brand)"
+      },
+      "progressCircle": {
+        "trackColor": "var(--seed-v3-color-palette-carrot-200)",
+        "rangeColor": "var(--seed-v3-color-fg-brand)"
+      }
+    },
+    "selectedPressed": {
+      "root": {
+        "color": "var(--seed-v3-color-bg-layer-default-pressed)"
+      }
+    },
+    "disabled": {
+      "root": {
+        "color": "var(--seed-v3-color-bg-disabled)",
+        "strokeWidth": "0px"
+      },
+      "label": {
+        "color": "var(--seed-v3-color-fg-disabled)"
+      },
+      "count": {
+        "color": "var(--seed-v3-color-fg-disabled)"
+      },
+      "prefixIcon": {
+        "color": "var(--seed-v3-color-fg-disabled)"
+      }
+    },
+    "loading": {
+      "root": {
+        "color": "var(--seed-v3-color-bg-neutral-weak-pressed)"
+      }
+    },
+    "selectedLoading": {
+      "root": {
+        "color": "var(--seed-v3-color-bg-layer-default-pressed)",
+        "strokeWidth": "1px"
+      }
+    }
+  },
+  "sizeXsmall": {
+    "enabled": {
+      "root": {
+        "minHeight": "var(--seed-v3-unit-s8)",
+        "cornerRadius": "var(--seed-v3-radius-full)",
+        "gap": "var(--seed-v3-unit-s1)",
+        "paddingX": "var(--seed-v3-unit-s3)",
+        "paddingY": "var(--seed-v3-unit-s1_5)"
+      },
+      "prefixIcon": {
+        "size": "18px"
+      },
+      "label": {
+        "fontSize": "var(--seed-v3-font-size-s3)",
+        "lineHeight": "var(--seed-v3-line-height-s3)"
+      },
+      "count": {
+        "fontSize": "var(--seed-v3-font-size-s3)",
+        "lineHeight": "var(--seed-v3-line-height-s3)"
+      },
+      "progressCircle": {
+        "size": "14px",
+        "thickness": "2px"
+      }
+    }
+  },
+  "sizeSmall": {
+    "enabled": {
+      "root": {
+        "minHeight": "var(--seed-v3-unit-s9)",
+        "cornerRadius": "var(--seed-v3-radius-full)",
+        "gap": "var(--seed-v3-unit-s1)",
+        "paddingX": "var(--seed-v3-unit-s3_5)",
+        "paddingY": "var(--seed-v3-unit-s2)"
+      },
+      "prefixIcon": {
+        "size": "18px"
+      },
+      "label": {
+        "fontSize": "var(--seed-v3-font-size-s3)",
+        "lineHeight": "var(--seed-v3-line-height-s3)"
+      },
+      "count": {
+        "fontSize": "var(--seed-v3-font-size-s3)",
+        "lineHeight": "var(--seed-v3-line-height-s3)"
+      },
+      "progressCircle": {
+        "size": "14px",
+        "thickness": "2px"
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/packages/vars/lib/component/toggle-button.d.ts b/packages/vars/lib/component/toggle-button.d.ts
index 901fc74ff..e41af7254 100644
--- a/packages/vars/lib/component/toggle-button.d.ts
+++ b/packages/vars/lib/component/toggle-button.d.ts
@@ -18,9 +18,6 @@ export declare const vars: {
       "label": {
         "color": "var(--seed-v3-color-fg-static-white)"
       },
-      "icon": {
-        "color": "var(--seed-v3-color-fg-static-white)"
-      },
       "prefixIcon": {
         "color": "var(--seed-v3-color-fg-static-white)"
       },
@@ -44,9 +41,6 @@ export declare const vars: {
       "label": {
         "color": "var(--seed-v3-color-fg-neutral)"
       },
-      "icon": {
-        "color": "var(--seed-v3-color-fg-neutral)"
-      },
       "prefixIcon": {
         "color": "var(--seed-v3-color-fg-neutral)"
       },
@@ -70,9 +64,6 @@ export declare const vars: {
       "label": {
         "color": "var(--seed-v3-color-fg-disabled)"
       },
-      "icon": {
-        "color": "var(--seed-v3-color-fg-disabled)"
-      },
       "prefixIcon": {
         "color": "var(--seed-v3-color-fg-disabled)"
       },
@@ -99,9 +90,6 @@ export declare const vars: {
       "label": {
         "color": "var(--seed-v3-color-fg-neutral)"
       },
-      "icon": {
-        "color": "var(--seed-v3-color-fg-neutral)"
-      },
       "prefixIcon": {
         "color": "var(--seed-v3-color-fg-neutral)"
       },
@@ -125,9 +113,6 @@ export declare const vars: {
       "label": {
         "color": "var(--seed-v3-color-fg-neutral)"
       },
-      "icon": {
-        "color": "var(--seed-v3-color-fg-neutral)"
-      },
       "prefixIcon": {
         "color": "var(--seed-v3-color-fg-neutral)"
       },
@@ -151,9 +136,6 @@ export declare const vars: {
       "label": {
         "color": "var(--seed-v3-color-fg-disabled)"
       },
-      "icon": {
-        "color": "var(--seed-v3-color-fg-disabled)"
-      },
       "prefixIcon": {
         "color": "var(--seed-v3-color-fg-disabled)"
       },
@@ -202,7 +184,7 @@ export declare const vars: {
         "minHeight": "var(--seed-v3-unit-s9)",
         "cornerRadius": "var(--seed-v3-radius-full)",
         "gap": "var(--seed-v3-unit-s1)",
-        "paddingX": "var(--seed-v3-unit-s3_5)",
+        "paddingX": "var(--seed-v3-unit-s4)",
         "paddingY": "var(--seed-v3-unit-s2)"
       },
       "prefixIcon": {
diff --git a/packages/vars/lib/component/toggle-button.mjs b/packages/vars/lib/component/toggle-button.mjs
index 69a13c5d5..ba7565928 100644
--- a/packages/vars/lib/component/toggle-button.mjs
+++ b/packages/vars/lib/component/toggle-button.mjs
@@ -18,9 +18,6 @@ export const vars = {
       "label": {
         "color": "var(--seed-v3-color-fg-static-white)"
       },
-      "icon": {
-        "color": "var(--seed-v3-color-fg-static-white)"
-      },
       "prefixIcon": {
         "color": "var(--seed-v3-color-fg-static-white)"
       },
@@ -44,9 +41,6 @@ export const vars = {
       "label": {
         "color": "var(--seed-v3-color-fg-neutral)"
       },
-      "icon": {
-        "color": "var(--seed-v3-color-fg-neutral)"
-      },
       "prefixIcon": {
         "color": "var(--seed-v3-color-fg-neutral)"
       },
@@ -70,9 +64,6 @@ export const vars = {
       "label": {
         "color": "var(--seed-v3-color-fg-disabled)"
       },
-      "icon": {
-        "color": "var(--seed-v3-color-fg-disabled)"
-      },
       "prefixIcon": {
         "color": "var(--seed-v3-color-fg-disabled)"
       },
@@ -99,9 +90,6 @@ export const vars = {
       "label": {
         "color": "var(--seed-v3-color-fg-neutral)"
       },
-      "icon": {
-        "color": "var(--seed-v3-color-fg-neutral)"
-      },
       "prefixIcon": {
         "color": "var(--seed-v3-color-fg-neutral)"
       },
@@ -125,9 +113,6 @@ export const vars = {
       "label": {
         "color": "var(--seed-v3-color-fg-neutral)"
       },
-      "icon": {
-        "color": "var(--seed-v3-color-fg-neutral)"
-      },
       "prefixIcon": {
         "color": "var(--seed-v3-color-fg-neutral)"
       },
@@ -151,9 +136,6 @@ export const vars = {
       "label": {
         "color": "var(--seed-v3-color-fg-disabled)"
       },
-      "icon": {
-        "color": "var(--seed-v3-color-fg-disabled)"
-      },
       "prefixIcon": {
         "color": "var(--seed-v3-color-fg-disabled)"
       },
@@ -202,7 +184,7 @@ export const vars = {
         "minHeight": "var(--seed-v3-unit-s9)",
         "cornerRadius": "var(--seed-v3-radius-full)",
         "gap": "var(--seed-v3-unit-s1)",
-        "paddingX": "var(--seed-v3-unit-s3_5)",
+        "paddingX": "var(--seed-v3-unit-s4)",
         "paddingY": "var(--seed-v3-unit-s2)"
       },
       "prefixIcon": {
diff --git a/yarn.lock b/yarn.lock
index a9cdb48a1..a307fedac 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3749,10 +3749,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@daangn/icon-data@npm:^0.0.18":
-  version: 0.0.18
-  resolution: "@daangn/icon-data@npm:0.0.18::__archiveUrl=https%3A%2F%2Fnpm.pkg.github.com%2Fdownload%2F%40daangn%2Ficon-data%2F0.0.18%2Fe9234508b50f290fa011c90b2d0caebc1dff5960"
-  checksum: 10/b5e61aa033e18104e6b071b3578fd74885ce6b4eec302c9f238627ea2431bd6fb4ea6e3984b627729df5afe137129b6d8adc306ef6599eda984a8ae26b29990f
+"@daangn/icon-data@npm:^0.0.19":
+  version: 0.0.19
+  resolution: "@daangn/icon-data@npm:0.0.19::__archiveUrl=https%3A%2F%2Fnpm.pkg.github.com%2Fdownload%2F%40daangn%2Ficon-data%2F0.0.19%2F19a067ad52b44ce9b930bd408c3572d3e4e8d5d4"
+  checksum: 10/0bac33a47da297c75d27353b425e42f26a93f7bb1139bdd36fc7dce1856d52fc761770518b1457c950ef895d49c38459c0d41f80c9bc16318afdbe0e085e3f9e
   languageName: node
   linkType: hard
 
@@ -3766,6 +3766,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@daangn/react-monochrome-icon@npm:^0.0.14":
+  version: 0.0.14
+  resolution: "@daangn/react-monochrome-icon@npm:0.0.14::__archiveUrl=https%3A%2F%2Fnpm.pkg.github.com%2Fdownload%2F%40daangn%2Freact-monochrome-icon%2F0.0.14%2F3f3426bb4125879dfd5bb1c7863dcd0bf0770784"
+  peerDependencies:
+    "@types/react": "*"
+    react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+  checksum: 10/c02ca32122885fa7f452045d57aa9562aeb26f6b593f2a55fc84a581d19adf40c2fc02bce0f12df7198f0c6395385571d38ef54d186146fb0b2789f79c3a4a40
+  languageName: node
+  linkType: hard
+
 "@daangn/react-multicolor-icon@npm:^0.0.11":
   version: 0.0.11
   resolution: "@daangn/react-multicolor-icon@npm:0.0.11::__archiveUrl=https%3A%2F%2Fnpm.pkg.github.com%2Fdownload%2F%40daangn%2Freact-multicolor-icon%2F0.0.11%2F014890622549658d3a2b5f836e2448967edf39a7"
@@ -13089,8 +13099,8 @@ __metadata:
   resolution: "docs@workspace:docs"
   dependencies:
     "@chromatic-com/storybook": "npm:^3.2.2"
-    "@daangn/icon-data": "npm:^0.0.18"
-    "@daangn/react-monochrome-icon": "npm:^0.0.13"
+    "@daangn/icon-data": "npm:^0.0.19"
+    "@daangn/react-monochrome-icon": "npm:^0.0.14"
     "@daangn/react-multicolor-icon": "npm:^0.0.12"
     "@next/env": "npm:^15.0.4"
     "@portabletext/react": "npm:^3.1.0"