diff --git a/src/@chakra-ui/gatsby-plugin/components/Button.ts b/src/@chakra-ui/gatsby-plugin/components/Button.ts
index 6a20efd7e46..fb9ca7f8a08 100644
--- a/src/@chakra-ui/gatsby-plugin/components/Button.ts
+++ b/src/@chakra-ui/gatsby-plugin/components/Button.ts
@@ -39,6 +39,10 @@ const variantSolid = defineStyle({
   color: "background.base",
   bg: "primary.base",
   borderColor: "transparent",
+  _disabled: {
+    bg: "disabled",
+    color: "background.base",
+  },
   _hover: {
     color: "background.base",
     bg: "primary.hover",
diff --git a/src/@chakra-ui/gatsby-plugin/semanticTokens.ts b/src/@chakra-ui/gatsby-plugin/semanticTokens.ts
index 03536b45ecf..074abfe62cc 100644
--- a/src/@chakra-ui/gatsby-plugin/semanticTokens.ts
+++ b/src/@chakra-ui/gatsby-plugin/semanticTokens.ts
@@ -60,7 +60,7 @@ const semanticTokens = {
       base: { _light: "white", _dark: "gray.700" },
       highlight: { _light: "gray.100", _dark: "gray.900" },
     },
-    disabled: { _light: "gray.300", _dark: "gray.500" },
+    disabled: { _light: "gray.400", _dark: "gray.500" },
     // ! Deprecating neutral
     neutral: { _light: "white", _dark: "gray.900" },
 
diff --git a/src/components/Button/Button.stories.tsx b/src/components/Button/Button.stories.tsx
index 62588bcfefd..e5b41e303f7 100644
--- a/src/components/Button/Button.stories.tsx
+++ b/src/components/Button/Button.stories.tsx
@@ -47,7 +47,12 @@ export const StyleVariants: Story = {
     <VStack spacing={4}>
       {variants.map((variant, idx) => {
         if (args.isSecondary && variant === "solid") return
-        return <Button key={idx} variant={variant} {...args} />
+        return (
+          <HStack spacing={4} key={idx}>
+            <Button variant={variant} {...args} />
+            <Button variant={variant} isDisabled {...args} />
+          </HStack>
+        )
       })}
     </VStack>
   ),