From a61671f5ae84b7b3d3723f12ca671a99ab0ef4d1 Mon Sep 17 00:00:00 2001
From: Charles de Dreuille <charles.dedreuille@gmail.com>
Date: Fri, 6 Jun 2025 09:39:04 +0200
Subject: [PATCH] Improve docs

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
---
 .../src/app/(docs)/components/button/page.mdx      | 14 ++++++++++++++
 .../src/app/(docs)/components/button/props.ts      |  6 ++++++
 .../canon/src/components/Button/Button.stories.tsx |  4 ++--
 3 files changed, 22 insertions(+), 2 deletions(-)

diff --git a/canon-docs/src/app/(docs)/components/button/page.mdx b/canon-docs/src/app/(docs)/components/button/page.mdx
index e1ecee8920..3554ee39f9 100644
--- a/canon-docs/src/app/(docs)/components/button/page.mdx
+++ b/canon-docs/src/app/(docs)/components/button/page.mdx
@@ -125,6 +125,20 @@ Here's a view when buttons are disabled.
   code={`<Button disabled>Button</Button>`}
 />
 
+### As Link
+
+Here's a view when buttons are rendered as a link.
+
+<Snippet
+  align="center"
+  py={4}
+  open
+  preview={<ButtonSnippet story="AsLink" />}
+  code={`<Button render={<a href="https://canon.backstage.io" target="_blank" />}>
+    I am a link
+  </Button>`}
+/>
+
 ### Responsive
 
 Here's a view when buttons are responsive.
diff --git a/canon-docs/src/app/(docs)/components/button/props.ts b/canon-docs/src/app/(docs)/components/button/props.ts
index 813dcaa6f0..36b0f73066 100644
--- a/canon-docs/src/app/(docs)/components/button/props.ts
+++ b/canon-docs/src/app/(docs)/components/button/props.ts
@@ -14,6 +14,12 @@ export const buttonPropDefs: Record<string, PropDef> = {
     default: 'medium',
     responsive: true,
   },
+  render: {
+    type: 'enum',
+    values: ['ReactNode'],
+    responsive: false,
+    default: '<button />',
+  },
   ...classNamePropDefs,
   ...stylePropDefs,
 };
diff --git a/packages/canon/src/components/Button/Button.stories.tsx b/packages/canon/src/components/Button/Button.stories.tsx
index 2034f8a3d4..2d79da7e29 100644
--- a/packages/canon/src/components/Button/Button.stories.tsx
+++ b/packages/canon/src/components/Button/Button.stories.tsx
@@ -133,12 +133,12 @@ export const Disabled: Story = {
 
 export const AsLink: Story = {
   args: {
-    children: 'Button',
+    children: 'I am a link',
   },
   render: args => (
     <Button
       {...args}
-      render={<a href="https://canon.backstage.io">Button</a>}
+      render={<a href="https://canon.backstage.io" target="_blank" />}
     />
   ),
 };