diff --git a/docs/content/components/form/button/button-link.demo.tsx b/docs/content/components/form/button/button-link.demo.tsx
new file mode 100644
index 0000000000..86f915ec3d
--- /dev/null
+++ b/docs/content/components/form/button/button-link.demo.tsx
@@ -0,0 +1,10 @@
+import { Button, Inline, Link } from '@marigold/components';
+
+export default () => (
+  <Inline space={2} alignY="center" alignX="center">
+    <Button variant="primary">Save</Button>
+    <Link variant="secondary" href="#">
+      Cancel
+    </Link>
+  </Inline>
+);
diff --git a/docs/content/components/form/button/button-press.demo.tsx b/docs/content/components/form/button/button-press.demo.tsx
index 8ecd9fb8d9..cf995d0b11 100644
--- a/docs/content/components/form/button/button-press.demo.tsx
+++ b/docs/content/components/form/button/button-press.demo.tsx
@@ -8,7 +8,7 @@ export default () => {
   return (
     <Stack space={3} alignX="left">
       <Button
-        variant="secondary"
+        variant="primary"
         onPress={() => setCount(count + 1)}
         onPressStart={e => setPointerType(e.pointerType)}
         onPressEnd={() => setPointerType('')}
diff --git a/docs/content/components/form/button/button.mdx b/docs/content/components/form/button/button.mdx
index b07d97cb31..3e57a59fe4 100644
--- a/docs/content/components/form/button/button.mdx
+++ b/docs/content/components/form/button/button.mdx
@@ -209,6 +209,8 @@ Understanding this distinction is crucial: anchors handle navigation, while butt
 
 To visually imitate a button element that navigates (e.g., a "Cancel" action that redirects users to the previous page), use the [`<Link>`](/components/content/link) component with the corresponding `variant`, usually `secondary`. This way, the action is clear and prominent while keeping its navigation function.
 
+<ComponentDemo file="./button-link.demo.tsx" />
+
 <GuidelineTiles>
   <Do>
     <Do.Description>