diff --git a/canon-docs/src/content/components/button-icon.mdx b/canon-docs/src/content/components/button-icon.mdx
index 2281814a89..b020b19f33 100644
--- a/canon-docs/src/content/components/button-icon.mdx
+++ b/canon-docs/src/content/components/button-icon.mdx
@@ -14,7 +14,7 @@ import {
 } from './button-icon.props';
 import { ComponentInfos } from '@/components/ComponentInfos';
 
-# Icon Button
+# ButtonIcon
 
 A button component with a single icon that can be used to trigger actions.
 
@@ -27,7 +27,7 @@ A button component with a single icon that can be used to trigger actions.
 
 <ComponentInfos
   component="button-icon"
-  classNames={['canon-ButtonIcon']}
+  classNames={['canon-Button', 'canon-ButtonIcon']}
   usageCode={buttonIconUsageSnippet}
 />
 
diff --git a/canon-docs/src/content/components/button-icon.props.ts b/canon-docs/src/content/components/button-icon.props.ts
index 160690a29e..a21bf3cd57 100644
--- a/canon-docs/src/content/components/button-icon.props.ts
+++ b/canon-docs/src/content/components/button-icon.props.ts
@@ -48,7 +48,7 @@ export const buttonIconSizesSnippet = `<Flex align="center">
   <ButtonIcon icon={<Icon name="cloud" />} size="medium" />
 </Flex>`;
 
-export const buttonIconDisabledSnippet = `<ButtonIcon icon={<Icon name="cloud" />} disabled />`;
+export const buttonIconDisabledSnippet = `<ButtonIcon icon={<Icon name="cloud" />} isDisabled />`;
 
 export const buttonIconResponsiveSnippet = `<ButtonIcon icon={<Icon name="cloud" />} variant={{ initial: 'primary', lg: 'secondary' }} />`;
 
diff --git a/canon-docs/src/content/components/button-link.mdx b/canon-docs/src/content/components/button-link.mdx
index 3f24874220..f6da987941 100644
--- a/canon-docs/src/content/components/button-link.mdx
+++ b/canon-docs/src/content/components/button-link.mdx
@@ -26,7 +26,7 @@ A button component that can be used as a link.
 
 <ComponentInfos
   component="button-link"
-  classNames={['canon-ButtonLink']}
+  classNames={['canon-Button', 'canon-ButtonLink']}
   usageCode={buttonLinkSnippetUsage}
 />
 
diff --git a/canon-docs/src/content/components/button-link.props.ts b/canon-docs/src/content/components/button-link.props.ts
index 94d696b736..b92b3154e5 100644
--- a/canon-docs/src/content/components/button-link.props.ts
+++ b/canon-docs/src/content/components/button-link.props.ts
@@ -36,10 +36,10 @@ export const buttonLinkSnippetUsage = `import { ButtonLink } from '@backstage/ca
 <ButtonLink />`;
 
 export const buttonLinkVariantsSnippet = `<Flex align="center">
-  <ButtonLink iconStart="cloud" variant="primary">
+  <ButtonLink iconStart={<Icon name="cloud" />} variant="primary">
     Button
   </ButtonLink>
-  <ButtonLink iconStart="cloud" variant="secondary">
+  <ButtonLink iconStart={<Icon name="cloud" />} variant="secondary">
     Button
   </ButtonLink>
 </Flex>`;
diff --git a/canon-docs/src/content/components/button.mdx b/canon-docs/src/content/components/button.mdx
index 89d3c3f612..c0053d0f5e 100644
--- a/canon-docs/src/content/components/button.mdx
+++ b/canon-docs/src/content/components/button.mdx
@@ -27,7 +27,7 @@ A button component that can be used to trigger actions.
 
 <ComponentInfos
   component="button"
-  classNames={['canon-Button', 'canon-ButtonIcon']}
+  classNames={['canon-Button']}
   usageCode={buttonSnippetUsage}
 />