Add docs

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

canon-docs/src/app/(docs)/components/icon-button/page.mdx

@@ -0,0 +1,111 @@
+import { PropsTable } from '@/components/PropsTable';
+import { Snippet } from '@/components/Snippet';
+import { Tabs } from '@/components/Tabs';
+import { CodeBlock } from '@/components/CodeBlock';
+import {
+  IconButtonPreview,
+  IconButtonSizes,
+  IconButtonDisabled,
+  IconButtonResponsive,
+} from '@/snippets/icon-button';
+import { iconButtonVariants } from '@/snippets/_snippets';
+import { iconButtonPropDefs } from '../../../../../../packages/canon/src/components/IconButton/IconButton.props';
+
+# Icon Button
+
+A button component with a single icon that can be used to trigger actions.
+
+<Snippet
+  align="center"
+  py={4}
+  preview={<IconButtonPreview />}
+  code={`<Flex align="center">
+    <IconButton icon="cloud" variant="primary" />
+    <IconButton icon="cloud" variant="secondary" />
+</Flex>`}
+/>
+
+<Tabs.Root>
+  <Tabs.List>
+    <Tabs.Tab>Usage</Tabs.Tab>
+    <Tabs.Tab>Theming</Tabs.Tab>
+  </Tabs.List>
+  <Tabs.Panel>
+    <CodeBlock
+      code={`import { IconButton } from '@backstage/canon';
+
+<IconButton />
+`}
+    />
+  </Tabs.Panel>
+  <Tabs.Panel>
+    We recommend starting with our [global tokens](/theme/theming) to customize the library and align it with
+    your brand. For additional flexibility, you can use the provided class names for each element listed below.
+    <CodeBlock
+      code={`<IconButton className="canon-IconButton" />`}
+    />
+
+  </Tabs.Panel>
+</Tabs.Root>
+
+## API reference
+
+<PropsTable
+  data={{
+    ...iconButtonPropDefs,
+    icon: { values: 'icon', responsive: false },
+  }}
+/>
+
+## Examples
+
+### Variants
+
+Here's a view when buttons have different variants.
+
+<Snippet
+  align="center"
+  py={4}
+  open
+  preview={<IconButtonPreview />}
+  code={iconButtonVariants}
+/>
+
+### Sizes
+
+Here's a view when buttons have different sizes.
+
+<Snippet
+  align="center"
+  py={4}
+  open
+  preview={<IconButtonSizes />}
+  code={`<Flex align="center">
+    <IconButton icon="cloud" size="small" />
+    <IconButton icon="cloud" size="medium" />
+</Flex>`}
+/>
+
+### Disabled
+
+Here's a view when buttons are disabled.
+
+<Snippet
+  align="center"
+  py={4}
+  open
+  preview={<IconButtonDisabled />}
+  code={`<IconButton icon="cloud" disabled />`}
+/>
+
+### Responsive
+
+Here's a view when buttons are responsive.
+
+<Snippet
+  align="center"
+  py={4}
+  open
+  preview={<IconButtonResponsive />}
+  code={`<IconButton icon="cloud" variant={{ initial: 'primary', lg: 'secondary' }} />`}
+/>

canon-docs/src/components/PropsTable/PropsTable.tsx

@@ -19,10 +19,6 @@ export const PropsTable = <T extends Record<string, PropData>>({
 }) => {
   const completeData = {
     ...data,
-    children: {
-      values: 'ReactNode',
-      responsive: false,
-    },
     className: {
       values: 'string',
       responsive: false,

canon-docs/src/snippets/_snippets.ts

@@ -38,7 +38,7 @@ export const grid = `import { Grid } from '@backstage/canon';
 </Grid>
 `;
 
-export const buttonVariants = `<Inline alignY="center">
+export const buttonVariants = `<Flex align="center">
   <Button iconStart="cloud" variant="primary">
     Button
   </Button>
@@ -48,7 +48,13 @@ export const buttonVariants = `<Inline alignY="center">
   <Button iconStart="cloud" variant="tertiary">
     Button
   </Button>
-</Inline>
+</Flex>
+`;
+
+export const iconButtonVariants = `<Flex align="center">
+  <IconButton icon="cloud" variant="primary" />
+  <IconButton icon="cloud" variant="secondary" />
+</Flex>
 `;
 
 export const flexFAQ1 = `<Grid columns={3} gap="4">

canon-docs/src/snippets/icon-button.tsx

@@ -0,0 +1,57 @@
+'use client';
+
+import { IconButton, Flex, ButtonProps, Text } from '../../../packages/canon';
+
+export const IconButtonPreview = () => {
+  return (
+    <Flex align="center">
+      <IconButton icon="cloud" variant="primary" />
+      <IconButton icon="cloud" variant="secondary" />
+    </Flex>
+  );
+};
+
+export const IconButtonSizes = () => {
+  return (
+    <Flex align="center">
+      <IconButton icon="cloud" size="medium" />
+      <IconButton icon="cloud" size="small" />
+    </Flex>
+  );
+};
+
+export const IconButtonDisabled = () => {
+  return <IconButton icon="cloud" disabled />;
+};
+
+export const IconButtonResponsive = () => {
+  return (
+    <IconButton
+      icon="cloud"
+      variant={{ initial: 'primary', lg: 'secondary' }}
+    />
+  );
+};
+
+export const IconButtonPlayground = () => {
+  const variants: string[] = ['primary', 'secondary'];
+
+  return (
+    <Flex direction="column">
+      {variants.map(variant => (
+        <Flex direction="column" key={variant}>
+          <Text>{variant}</Text>
+          {['small', 'medium'].map(size => (
+            <Flex align="center" key={size}>
+              <IconButton
+                icon="cloud"
+                variant={variant as ButtonProps['variant']}
+                size={size as ButtonProps['size']}
+              />
+            </Flex>
+          ))}
+        </Flex>
+      ))}
+    </Flex>
+  );
+};

canon-docs/src/utils/data.ts

@@ -87,6 +87,11 @@ export const components: Page[] = [
     slug: 'icon',
     status: 'alpha',
   },
+  {
+    title: 'IconButton',
+    slug: 'icon-button',
+    status: 'alpha',
+  },
   {
     title: 'Input',
     slug: 'input',