docs: add button link demo (#4089)

* docs: add button link demo

* change to priamry

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>
+);

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('')}

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>