Improve docs

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>

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.

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,
 };

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" />}
     />
   ),
 };