Merge pull request #30297 from backstage/canon-button-link

Canon - Improve support for button links in Button and IconButton

.changeset/public-nails-melt.md

@@ -0,0 +1,13 @@
+---
+'@backstage/canon': minor
+---
+
+**BREAKING CHANGES**
+
+We’re updating our Button component to provide better support for button links.
+
+- We’re introducing a new `ButtonLink` component, which replaces the previous render prop pattern.
+- To maintain naming consistency across components, `IconButton` is being renamed to `ButtonIcon`.
+- Additionally, the render prop will be removed from all button-related components.
+
+These changes aim to simplify usage and improve clarity in our component API.

canon-docs/src/components/Sidebar/Sidebar.module.css

@@ -55,10 +55,6 @@
   gap: 2px;
 }
 
-.playgroundSection {
-  position: absolute;
-}
-
 .sectionTitle {
   font-size: var(--canon-font-size-3);
   font-weight: var(--canon-font-weight-bold);

canon-docs/src/components/Sidebar/playground.tsx

@@ -38,9 +38,7 @@ export const Playground = () => {
 
   return (
     <motion.div
-      className={`${styles.section} ${
-        isPlayground ? styles.playgroundSection : ''
-      }`}
+      className={styles.section}
       animate={{
         opacity: isPlayground ? 1 : 0,
         x: isPlayground ? 0 : 20,
@@ -52,6 +50,7 @@ export const Playground = () => {
         visibility: isPlayground ? 'visible' : 'hidden',
       }}
       transition={{ duration: 0.2 }}
+      style={{ position: 'absolute' }}
     >
       <div className={styles.sectionTitle}>Components</div>
       {components.map(({ slug, title }) => (

canon-docs/src/content/components/button-icon.mdx

@@ -0,0 +1,80 @@
+import { PropsTable } from '@/components/PropsTable';
+import { Snippet } from '@/components/Snippet';
+import { CodeBlock } from '@/components/CodeBlock';
+import { ButtonIconSnippet } from '@/snippets/stories-snippets';
+import {
+  buttonIconPropDefs,
+  buttonIconUsageSnippet,
+  buttonIconDefaultSnippet,
+  buttonIconVariantsSnippet,
+  buttonIconSizesSnippet,
+  buttonIconDisabledSnippet,
+  buttonIconResponsiveSnippet,
+  buttonIconAsLinkSnippet,
+} from './button-icon.props';
+import { ComponentInfos } from '@/components/ComponentInfos';
+
+# ButtonIcon
+
+A button component with a single icon that can be used to trigger actions.
+
+<Snippet
+  align="center"
+  py={4}
+  preview={<ButtonIconSnippet story="Variants" />}
+  code={buttonIconDefaultSnippet}
+/>
+
+<ComponentInfos
+  component="button-icon"
+  classNames={['canon-Button', 'canon-ButtonIcon']}
+  usageCode={buttonIconUsageSnippet}
+/>
+
+## API reference
+
+<PropsTable data={buttonIconPropDefs} />
+
+## Examples
+
+### Variants
+
+Here's a view when buttons have different variants.
+
+<Snippet
+  align="center"
+  py={4}
+  open
+  preview={<ButtonIconSnippet story="Variants" />}
+  code={buttonIconVariantsSnippet}
+/>
+
+### Sizes
+
+Here's a view when buttons have different sizes.
+
+<Snippet
+  align="center"
+  py={4}
+  open
+  preview={<ButtonIconSnippet story="Sizes" />}
+  code={buttonIconSizesSnippet}
+/>
+
+### Disabled
+
+Here's a view when buttons are disabled.
+
+<Snippet
+  align="center"
+  py={4}
+  open
+  preview={<ButtonIconSnippet story="Disabled" />}
+  code={buttonIconDisabledSnippet}
+/>
+
+### Responsive
+
+Here's a view when buttons are responsive.
+
+<CodeBlock code={buttonIconResponsiveSnippet} />

canon-docs/src/content/components/button-icon.props.ts

@@ -0,0 +1,59 @@
+import {
+  classNamePropDefs,
+  stylePropDefs,
+  type PropDef,
+} from '@/utils/propDefs';
+
+export const buttonIconPropDefs: Record<string, PropDef> = {
+  variant: {
+    type: 'enum',
+    values: ['primary', 'secondary'],
+    default: 'primary',
+    responsive: true,
+  },
+  size: {
+    type: 'enum',
+    values: ['small', 'medium'],
+    default: 'medium',
+    responsive: true,
+  },
+  icon: { type: 'enum', values: ['ReactNode'], responsive: false },
+  isDisabled: { type: 'boolean', default: 'false', responsive: false },
+  type: {
+    type: 'enum',
+    values: ['button', 'submit', 'reset'],
+    default: 'button',
+    responsive: false,
+  },
+  ...classNamePropDefs,
+  ...stylePropDefs,
+};
+
+export const buttonIconUsageSnippet = `import { ButtonIcon } from '@backstage/canon';
+
+<ButtonIcon />`;
+
+export const buttonIconDefaultSnippet = `<Flex align="center">
+  <ButtonIcon icon={<Icon name="cloud" />} variant="primary" />
+  <ButtonIcon icon={<Icon name="cloud" />} variant="secondary" />
+</Flex>`;
+
+export const buttonIconVariantsSnippet = `<Flex align="center">
+  <ButtonIcon icon={<Icon name="cloud" />} variant="primary" />
+  <ButtonIcon icon={<Icon name="cloud" />} variant="secondary" />
+</Flex>`;
+
+export const buttonIconSizesSnippet = `<Flex align="center">
+  <ButtonIcon icon={<Icon name="cloud" />} size="small" />
+  <ButtonIcon icon={<Icon name="cloud" />} size="medium" />
+</Flex>`;
+
+export const buttonIconDisabledSnippet = `<ButtonIcon icon={<Icon name="cloud" />} isDisabled />`;
+
+export const buttonIconResponsiveSnippet = `<ButtonIcon icon={<Icon name="cloud" />} variant={{ initial: 'primary', lg: 'secondary' }} />`;
+
+export const buttonIconAsLinkSnippet = `import { ButtonLink } from '@backstage/canon';
+
+<ButtonLink href="https://canon.backstage.io" target="_blank">
+  Button
+</ButtonLink>`;

canon-docs/src/content/components/button-link.mdx

@@ -0,0 +1,91 @@
+import { PropsTable } from '@/components/PropsTable';
+import { Snippet } from '@/components/Snippet';
+import { CodeBlock } from '@/components/CodeBlock';
+import { ButtonLinkSnippet } from '@/snippets/stories-snippets';
+import {
+  buttonLinkPropDefs,
+  buttonLinkSnippetUsage,
+  buttonLinkVariantsSnippet,
+  buttonLinkSizesSnippet,
+  buttonLinkIconsSnippet,
+  buttonLinkDisabledSnippet,
+  buttonLinkResponsiveSnippet,
+} from './button-link.props';
+import { ComponentInfos } from '@/components/ComponentInfos';
+
+# ButtonLink
+
+A button component that can be used as a link.
+
+<Snippet
+  align="center"
+  py={4}
+  preview={<ButtonLinkSnippet story="Variants" />}
+  code={buttonLinkVariantsSnippet}
+/>
+
+<ComponentInfos
+  component="button-link"
+  classNames={['canon-Button', 'canon-ButtonLink']}
+  usageCode={buttonLinkSnippetUsage}
+/>
+
+## API reference
+
+<PropsTable data={buttonLinkPropDefs} />
+
+## Examples
+
+### Variants
+
+Here's a view when buttons have different variants.
+
+<Snippet
+  align="center"
+  py={4}
+  open
+  preview={<ButtonLinkSnippet story="Variants" />}
+  code={buttonLinkVariantsSnippet}
+/>
+
+### Sizes
+
+Here's a view when buttons have different sizes.
+
+<Snippet
+  align="center"
+  py={4}
+  open
+  preview={<ButtonLinkSnippet story="Sizes" />}
+  code={buttonLinkSizesSnippet}
+/>
+
+### With Icons
+
+Here's a view when buttons have icons.
+
+<Snippet
+  align="center"
+  py={4}
+  open
+  preview={<ButtonLinkSnippet story="WithIcons" />}
+  code={buttonLinkIconsSnippet}
+/>
+
+### Disabled
+
+Here's a view when buttons are disabled.
+
+<Snippet
+  align="center"
+  py={4}
+  open
+  preview={<ButtonLinkSnippet story="Disabled" />}
+  code={buttonLinkDisabledSnippet}
+/>
+
+### Responsive
+
+Here's a view when buttons are responsive.
+
+<CodeBlock code={buttonLinkResponsiveSnippet} />

canon-docs/src/content/components/button-link.props.ts

@@ -0,0 +1,73 @@
+import { classNamePropDefs, stylePropDefs } from '../../utils/propDefs';
+import type { PropDef } from '../../utils/propDefs';
+
+export const buttonLinkPropDefs: Record<string, PropDef> = {
+  variant: {
+    type: 'enum',
+    values: ['primary', 'secondary'],
+    default: 'primary',
+    responsive: true,
+  },
+  size: {
+    type: 'enum',
+    values: ['small', 'medium'],
+    default: 'medium',
+    responsive: true,
+  },
+  iconStart: { type: 'enum', values: ['ReactNode'], responsive: false },
+  iconEnd: { type: 'enum', values: ['ReactNode'], responsive: false },
+  isDisabled: { type: 'boolean', default: 'false', responsive: false },
+  href: { type: 'string', responsive: false },
+  hrefLang: { type: 'string', responsive: false },
+  target: {
+    type: 'enum',
+    values: ['HTMLAttributeAnchorTarget'],
+    default: '_self',
+    responsive: false,
+  },
+  rel: { type: 'string', responsive: false },
+  children: { type: 'enum', values: ['ReactNode'], responsive: false },
+  ...classNamePropDefs,
+  ...stylePropDefs,
+};
+
+export const buttonLinkSnippetUsage = `import { ButtonLink } from '@backstage/canon';
+
+<ButtonLink />`;
+
+export const buttonLinkVariantsSnippet = `<Flex align="center">
+  <ButtonLink iconStart={<Icon name="cloud" />} variant="primary">
+    Button
+  </ButtonLink>
+  <ButtonLink iconStart={<Icon name="cloud" />} variant="secondary">
+    Button
+  </ButtonLink>
+</Flex>`;
+
+export const buttonLinkSizesSnippet = `<Flex align="center">
+  <ButtonLink size="small">Small</ButtonLink>
+  <ButtonLink size="medium">Medium</ButtonLink>
+</Flex>`;
+
+export const buttonLinkIconsSnippet = `<Flex align="center">
+  <ButtonLink iconStart={<Icon name="cloud" />}>Button</ButtonLink>
+  <ButtonLink iconEnd={<Icon name="chevronRight" />}>Button</ButtonLink>
+  <ButtonLink
+    iconStart={<Icon name="cloud" />}
+    iconEnd={<Icon name="chevronRight" />}>
+    Button
+  </ButtonLink>
+</Flex>`;
+
+export const buttonLinkDisabledSnippet = `<Flex gap="4">
+  <ButtonLink variant="primary" isDisabled>
+    Primary
+  </ButtonLink>
+  <ButtonLink variant="secondary" isDisabled>
+    Secondary
+  </ButtonLink>
+</Flex>`;
+
+export const buttonLinkResponsiveSnippet = `<ButtonLink variant={{ initial: 'primary', lg: 'secondary' }}>
+  Responsive Button
+</ButtonLink>`;

canon-docs/src/content/components/button.mdx

@@ -1,16 +1,16 @@
 import { PropsTable } from '@/components/PropsTable';
 import { Snippet } from '@/components/Snippet';
 import { CodeBlock } from '@/components/CodeBlock';
-import { ButtonSnippet } from '@/snippets/stories-snippets';
+import { ButtonSnippet, ButtonLinkSnippet } from '@/snippets/stories-snippets';
 import {
   buttonPropDefs,
   buttonSnippetUsage,
   buttonVariantsSnippet,
   buttonSizesSnippet,
   buttonIconsSnippet,
-  buttonFullWidthSnippet,
   buttonDisabledSnippet,
   buttonResponsiveSnippet,
+  buttonAsLinkSnippet,
 } from './button.props';
 import { ComponentInfos } from '@/components/ComponentInfos';
 
@@ -27,7 +27,7 @@ A button component that can be used to trigger actions.
 
 <ComponentInfos
   component="button"
-  classNames={['canon-Button', 'canon-ButtonIcon']}
+  classNames={['canon-Button']}
   usageCode={buttonSnippetUsage}
 />
 
@@ -73,18 +73,6 @@ Here's a view when buttons have icons.
   code={buttonIconsSnippet}
 />
 
-### Full width
-
-Here's a view when buttons are full width.
-
-<Snippet
-  align="center"
-  py={4}
-  open
-  preview={<ButtonSnippet story="FullWidth" />}
-  code={buttonFullWidthSnippet}
-/>
-
 ### Disabled
 
 Here's a view when buttons are disabled.
@@ -102,3 +90,15 @@ Here's a view when buttons are disabled.
 Here's a view when buttons are responsive.
 
 <CodeBlock code={buttonResponsiveSnippet} />
+
+### As Link
+
+If you want to use a button as a link, please use the `ButtonLink` component.
+
+<Snippet
+  align="center"
+  py={4}
+  open
+  preview={<ButtonLinkSnippet story="Variants" />}
+  code={buttonAsLinkSnippet}
+/>

canon-docs/src/content/components/button.props.ts

@@ -14,6 +14,16 @@ export const buttonPropDefs: Record<string, PropDef> = {
     default: 'medium',
     responsive: true,
   },
+  iconStart: { type: 'enum', values: ['ReactNode'], responsive: false },
+  iconEnd: { type: 'enum', values: ['ReactNode'], responsive: false },
+  isDisabled: { type: 'boolean', default: 'false', responsive: false },
+  children: { type: 'enum', values: ['ReactNode'], responsive: false },
+  type: {
+    type: 'enum',
+    values: ['button', 'submit', 'reset'],
+    default: 'button',
+    responsive: false,
+  },
   ...classNamePropDefs,
   ...stylePropDefs,
 };
@@ -29,9 +39,6 @@ export const buttonVariantsSnippet = `<Flex align="center">
   <Button iconStart="cloud" variant="secondary">
     Button
   </Button>
-  <Button iconStart="cloud" variant="tertiary">
-    Button
-  </Button>
 </Flex>`;
 
 export const buttonSizesSnippet = `<Flex align="center">
@@ -40,20 +47,16 @@ export const buttonSizesSnippet = `<Flex align="center">
 </Flex>`;
 
 export const buttonIconsSnippet = `<Flex align="center">
-  <Button iconStart="cloud">Button</Button>
-  <Button iconEnd="chevronRight">Button</Button>
-  <Button iconStart="cloud" iconEnd="chevronRight">Button</Button>
-</Flex>`;
-
-export const buttonFullWidthSnippet = `<Flex direction="column" gap="4" style={{ width: '300px' }}>
-  <Button fullWidth>Full width</Button>
+  <Button iconStart={<Icon name="cloud" />}>Button</Button>
+  <Button iconEnd={<Icon name="chevronRight" />}>Button</Button>
+  <Button iconStart={<Icon name="cloud" />} iconEnd={<Icon name="chevronRight" />}>Button</Button>
 </Flex>`;
 
 export const buttonDisabledSnippet = `<Flex gap="4">
-  <Button variant="primary" disabled>
+  <Button variant="primary" isDisabled>
     Primary
   </Button>
-  <Button variant="secondary" disabled>
+  <Button variant="secondary" isDisabled>
     Secondary
   </Button>
 </Flex>`;
@@ -61,3 +64,9 @@ export const buttonDisabledSnippet = `<Flex gap="4">
 export const buttonResponsiveSnippet = `<Button variant={{ initial: 'primary', lg: 'secondary' }}>
   Responsive Button
 </Button>`;
+
+export const buttonAsLinkSnippet = `import { ButtonLink } from '@backstage/canon';
+
+<ButtonLink href="https://canon.backstage.io" target="_blank">
+  Button
+</ButtonLink>`;

canon-docs/src/content/components/icon-button.mdx

@@ -1,79 +0,0 @@
-import { PropsTable } from '@/components/PropsTable';
-import { Snippet } from '@/components/Snippet';
-import { CodeBlock } from '@/components/CodeBlock';
-import { IconButtonSnippet } from '@/snippets/stories-snippets';
-import {
-  iconButtonPropDefs,
-  iconButtonUsageSnippet,
-  iconButtonDefaultSnippet,
-  iconButtonVariantsSnippet,
-  iconButtonSizesSnippet,
-  iconButtonDisabledSnippet,
-  iconButtonResponsiveSnippet,
-} from './icon-button.props';
-import { ComponentInfos } from '@/components/ComponentInfos';
-
-# Icon Button
-
-A button component with a single icon that can be used to trigger actions.
-
-<Snippet
-  align="center"
-  py={4}
-  preview={<IconButtonSnippet story="Variants" />}
-  code={iconButtonDefaultSnippet}
-/>
-
-<ComponentInfos
-  component="icon-button"
-  classNames={['canon-IconButton']}
-  usageCode={iconButtonUsageSnippet}
-/>
-
-## API reference
-
-<PropsTable data={iconButtonPropDefs} />
-
-## Examples
-
-### Variants
-
-Here's a view when buttons have different variants.
-
-<Snippet
-  align="center"
-  py={4}
-  open
-  preview={<IconButtonSnippet story="Variants" />}
-  code={iconButtonVariantsSnippet}
-/>
-
-### Sizes
-
-Here's a view when buttons have different sizes.
-
-<Snippet
-  align="center"
-  py={4}
-  open
-  preview={<IconButtonSnippet story="Sizes" />}
-  code={iconButtonSizesSnippet}
-/>
-
-### Disabled
-
-Here's a view when buttons are disabled.
-
-<Snippet
-  align="center"
-  py={4}
-  open
-  preview={<IconButtonSnippet story="Disabled" />}
-  code={iconButtonDisabledSnippet}
-/>
-
-### Responsive
-
-Here's a view when buttons are responsive.
-
-<CodeBlock code={iconButtonResponsiveSnippet} />

canon-docs/src/content/components/icon-button.props.ts

@@ -1,46 +0,0 @@
-import {
-  classNamePropDefs,
-  stylePropDefs,
-  type PropDef,
-} from '@/utils/propDefs';
-
-export const iconButtonPropDefs: Record<string, PropDef> = {
-  variant: {
-    type: 'enum',
-    values: ['primary', 'secondary'],
-    default: 'primary',
-    responsive: true,
-  },
-  size: {
-    type: 'enum',
-    values: ['small', 'medium'],
-    default: 'medium',
-    responsive: true,
-  },
-  icon: { type: 'enum', values: 'icon', responsive: false },
-  ...classNamePropDefs,
-  ...stylePropDefs,
-};
-
-export const iconButtonUsageSnippet = `import { IconButton } from '@backstage/canon';
-
-<IconButton />`;
-
-export const iconButtonDefaultSnippet = `<Flex align="center">
-  <IconButton icon="cloud" variant="primary" />
-  <IconButton icon="cloud" variant="secondary" />
-</Flex>`;
-
-export const iconButtonVariantsSnippet = `<Flex align="center">
-  <IconButton icon="cloud" variant="primary" />
-  <IconButton icon="cloud" variant="secondary" />
-</Flex>`;
-
-export const iconButtonSizesSnippet = `<Flex align="center">
-  <IconButton icon="cloud" size="small" />
-  <IconButton icon="cloud" size="medium" />
-</Flex>`;
-
-export const iconButtonDisabledSnippet = `<IconButton icon="cloud" disabled />`;
-
-export const iconButtonResponsiveSnippet = `<IconButton icon="cloud" variant={{ initial: 'primary', lg: 'secondary' }} />`;

canon-docs/src/snippets/stories-snippets.tsx

@@ -3,11 +3,12 @@
 import { composeStories } from '@storybook/react';
 import * as BoxStories from '../../../packages/canon/src/components/Box/Box.stories';
 import * as ButtonStories from '../../../packages/canon/src/components/Button/Button.stories';
+import * as ButtonIconStories from '../../../packages/canon/src/components/ButtonIcon/ButtonIcon.stories';
+import * as ButtonLinkStories from '../../../packages/canon/src/components/ButtonLink/ButtonLink.stories';
 import * as CheckboxStories from '../../../packages/canon/src/components/Checkbox/Checkbox.stories';
 import * as ContainerStories from '../../../packages/canon/src/components/Container/Container.stories';
 import * as GridStories from '../../../packages/canon/src/components/Grid/Grid.stories';
 import * as HeadingStories from '../../../packages/canon/src/components/Heading/Heading.stories';
-import * as IconButtonStories from '../../../packages/canon/src/components/IconButton/IconButton.stories';
 import * as IconStories from '../../../packages/canon/src/components/Icon/Icon.stories';
 import * as TextFieldStories from '../../../packages/canon/src/components/TextField/TextField.stories';
 import * as TextStories from '../../../packages/canon/src/components/Text/Text.stories';
@@ -38,6 +39,28 @@ export const ButtonSnippet = ({
   return StoryComponent ? <StoryComponent /> : null;
 };
 
+export const ButtonIconSnippet = ({
+  story,
+}: {
+  story: keyof typeof ButtonIconStories;
+}) => {
+  const stories = composeStories(ButtonIconStories);
+  const StoryComponent = stories[story as keyof typeof stories];
+
+  return StoryComponent ? <StoryComponent /> : null;
+};
+
+export const ButtonLinkSnippet = ({
+  story,
+}: {
+  story: keyof typeof ButtonLinkStories;
+}) => {
+  const stories = composeStories(ButtonLinkStories);
+  const StoryComponent = stories[story as keyof typeof stories];
+
+  return StoryComponent ? <StoryComponent /> : null;
+};
+
 export const CheckboxSnippet = ({
   story,
 }: {
@@ -96,17 +119,6 @@ export const HeadingSnippet = ({
   return StoryComponent ? <StoryComponent /> : null;
 };
 
-export const IconButtonSnippet = ({
-  story,
-}: {
-  story: keyof typeof IconButtonStories;
-}) => {
-  const stories = composeStories(IconButtonStories);
-  const StoryComponent = stories[story as keyof typeof stories];
-
-  return StoryComponent ? <StoryComponent /> : null;
-};
-
 export const IconSnippet = ({ story }: { story: keyof typeof IconStories }) => {
   const stories = composeStories(IconStories);
   const StoryComponent = stories[story as keyof typeof stories];

canon-docs/src/utils/data.ts

@@ -76,6 +76,16 @@ export const components: Page[] = [
     slug: 'button',
     status: 'alpha',
   },
+  {
+    title: 'ButtonIcon',
+    slug: 'button-icon',
+    status: 'alpha',
+  },
+  {
+    title: 'ButtonLink',
+    slug: 'button-link',
+    status: 'alpha',
+  },
   {
     title: 'Checkbox',
     slug: 'checkbox',
@@ -96,11 +106,6 @@ export const components: Page[] = [
     slug: 'icon',
     status: 'alpha',
   },
-  {
-    title: 'IconButton',
-    slug: 'icon-button',
-    status: 'alpha',
-  },
   {
     title: 'Link',
     slug: 'link',

packages/canon/css/button.css

@@ -69,21 +69,21 @@
 .canon-Button[data-size="medium"] {
   font-size: var(--canon-font-size-4);
   padding: 0 var(--canon-space-3);
-  height: 40px;
+  height: 2.5rem;
 }
 
 .canon-Button[data-size="small"] {
   font-size: var(--canon-font-size-3);
   padding: 0 var(--canon-space-2);
-  height: 32px;
+  height: 2rem;
 }
 
-.canon-ButtonIcon[data-size="small"], .canon-ButtonIcon[data-size="small"] svg {
+.canon-Button[data-size="small"] svg {
   width: 1rem;
   height: 1rem;
 }
 
-.canon-ButtonIcon[data-size="medium"], .canon-ButtonIcon[data-size="medium"] svg {
+.canon-Button[data-size="medium"] svg {
   width: 1.25rem;
   height: 1.25rem;
 }

packages/canon/css/buttonicon.css

@@ -0,0 +1,14 @@
+.canon-ButtonIcon {
+  justify-content: center;
+  align-items: center;
+}
+
+.canon-ButtonIcon[data-size="small"] {
+  width: 2rem;
+  padding: 0;
+}
+
+.canon-ButtonIcon[data-size="medium"] {
+  width: 2.5rem;
+  padding: 0;
+}

packages/canon/css/components.css

@@ -125,25 +125,40 @@
 .canon-Button[data-size="medium"] {
   font-size: var(--canon-font-size-4);
   padding: 0 var(--canon-space-3);
-  height: 40px;
+  height: 2.5rem;
 }
 
 .canon-Button[data-size="small"] {
   font-size: var(--canon-font-size-3);
   padding: 0 var(--canon-space-2);
-  height: 32px;
+  height: 2rem;
 }
 
-.canon-ButtonIcon[data-size="small"], .canon-ButtonIcon[data-size="small"] svg {
+.canon-Button[data-size="small"] svg {
   width: 1rem;
   height: 1rem;
 }
 
-.canon-ButtonIcon[data-size="medium"], .canon-ButtonIcon[data-size="medium"] svg {
+.canon-Button[data-size="medium"] svg {
   width: 1.25rem;
   height: 1.25rem;
 }
 
+.canon-ButtonIcon {
+  justify-content: center;
+  align-items: center;
+}
+
+.canon-ButtonIcon[data-size="small"] {
+  width: 2rem;
+  padding: 0;
+}
+
+.canon-ButtonIcon[data-size="medium"] {
+  width: 2.5rem;
+  padding: 0;
+}
+
 .canon-CheckboxRoot {
   width: 1rem;
   height: 1rem;
@@ -351,96 +366,6 @@
   height: 1rem;
 }
 
-.canon-IconButton {
-  user-select: none;
-  font-family: var(--canon-font-regular);
-  font-weight: var(--canon-font-weight-bold);
-  cursor: pointer;
-  border-radius: var(--canon-radius-2);
-  justify-content: center;
-  align-items: center;
-  gap: var(--canon-space-1_5);
-  border: none;
-  padding: 0;
-  display: inline-flex;
-
-  &:disabled {
-    cursor: not-allowed;
-  }
-}
-
-.canon-IconButton[data-variant="primary"] {
-  background-color: var(--canon-bg-solid);
-  color: var(--canon-fg-solid);
-  transition: background-color .15s, box-shadow .15s;
-
-  &:hover {
-    background-color: var(--canon-bg-solid-hover);
-  }
-
-  &:active {
-    background-color: var(--canon-bg-solid-pressed);
-  }
-
-  &:focus-visible {
-    outline: 2px solid var(--canon-ring);
-    outline-offset: 2px;
-  }
-
-  &:disabled {
-    background-color: var(--canon-bg-solid-disabled);
-    color: var(--canon-fg-solid-disabled);
-  }
-}
-
-.canon-IconButton[data-variant="secondary"] {
-  background-color: var(--canon-bg-surface-1);
-  box-shadow: inset 0 0 0 1px var(--canon-border);
-  color: var(--canon-fg-primary);
-  transition: box-shadow .15s;
-
-  &:hover {
-    box-shadow: inset 0 0 0 1px var(--canon-border-hover);
-  }
-
-  &:active {
-    box-shadow: inset 0 0 0 1px var(--canon-border-pressed);
-  }
-
-  &:focus-visible {
-    box-shadow: inset 0 0 0 2px var(--canon-ring);
-    outline: none;
-    transition: none;
-  }
-
-  &:disabled {
-    box-shadow: inset 0 0 0 1px var(--canon-border-disabled);
-    color: var(--canon-fg-disabled);
-  }
-}
-
-.canon-IconButton[data-size="medium"] {
-  font-size: var(--canon-font-size-4);
-  width: 40px;
-  height: 40px;
-}
-
-.canon-IconButton[data-size="small"] {
-  font-size: var(--canon-font-size-3);
-  width: 32px;
-  height: 32px;
-}
-
-.canon-IconButtonIcon[data-size="small"], .canon-IconButtonIcon[data-size="small"] svg {
-  width: 1rem;
-  height: 1rem;
-}
-
-.canon-IconButtonIcon[data-size="medium"], .canon-IconButtonIcon[data-size="medium"] svg {
-  width: 1.25rem;
-  height: 1.25rem;
-}
-
 .canon-Link {
   font-family: var(--canon-font-regular);
   color: var(--canon-fg-link);

packages/canon/css/styles.css

@@ -9349,25 +9349,40 @@
 .canon-Button[data-size="medium"] {
   font-size: var(--canon-font-size-4);
   padding: 0 var(--canon-space-3);
-  height: 40px;
+  height: 2.5rem;
 }
 
 .canon-Button[data-size="small"] {
   font-size: var(--canon-font-size-3);
   padding: 0 var(--canon-space-2);
-  height: 32px;
+  height: 2rem;
 }
 
-.canon-ButtonIcon[data-size="small"], .canon-ButtonIcon[data-size="small"] svg {
+.canon-Button[data-size="small"] svg {
   width: 1rem;
   height: 1rem;
 }
 
-.canon-ButtonIcon[data-size="medium"], .canon-ButtonIcon[data-size="medium"] svg {
+.canon-Button[data-size="medium"] svg {
   width: 1.25rem;
   height: 1.25rem;
 }
 
+.canon-ButtonIcon {
+  justify-content: center;
+  align-items: center;
+}
+
+.canon-ButtonIcon[data-size="small"] {
+  width: 2rem;
+  padding: 0;
+}
+
+.canon-ButtonIcon[data-size="medium"] {
+  width: 2.5rem;
+  padding: 0;
+}
+
 .canon-CheckboxRoot {
   width: 1rem;
   height: 1rem;
@@ -9575,96 +9590,6 @@
   height: 1rem;
 }
 
-.canon-IconButton {
-  user-select: none;
-  font-family: var(--canon-font-regular);
-  font-weight: var(--canon-font-weight-bold);
-  cursor: pointer;
-  border-radius: var(--canon-radius-2);
-  justify-content: center;
-  align-items: center;
-  gap: var(--canon-space-1_5);
-  border: none;
-  padding: 0;
-  display: inline-flex;
-
-  &:disabled {
-    cursor: not-allowed;
-  }
-}
-
-.canon-IconButton[data-variant="primary"] {
-  background-color: var(--canon-bg-solid);
-  color: var(--canon-fg-solid);
-  transition: background-color .15s, box-shadow .15s;
-
-  &:hover {
-    background-color: var(--canon-bg-solid-hover);
-  }
-
-  &:active {
-    background-color: var(--canon-bg-solid-pressed);
-  }
-
-  &:focus-visible {
-    outline: 2px solid var(--canon-ring);
-    outline-offset: 2px;
-  }
-
-  &:disabled {
-    background-color: var(--canon-bg-solid-disabled);
-    color: var(--canon-fg-solid-disabled);
-  }
-}
-
-.canon-IconButton[data-variant="secondary"] {
-  background-color: var(--canon-bg-surface-1);
-  box-shadow: inset 0 0 0 1px var(--canon-border);
-  color: var(--canon-fg-primary);
-  transition: box-shadow .15s;
-
-  &:hover {
-    box-shadow: inset 0 0 0 1px var(--canon-border-hover);
-  }
-
-  &:active {
-    box-shadow: inset 0 0 0 1px var(--canon-border-pressed);
-  }
-
-  &:focus-visible {
-    box-shadow: inset 0 0 0 2px var(--canon-ring);
-    outline: none;
-    transition: none;
-  }
-
-  &:disabled {
-    box-shadow: inset 0 0 0 1px var(--canon-border-disabled);
-    color: var(--canon-fg-disabled);
-  }
-}
-
-.canon-IconButton[data-size="medium"] {
-  font-size: var(--canon-font-size-4);
-  width: 40px;
-  height: 40px;
-}
-
-.canon-IconButton[data-size="small"] {
-  font-size: var(--canon-font-size-3);
-  width: 32px;
-  height: 32px;
-}
-
-.canon-IconButtonIcon[data-size="small"], .canon-IconButtonIcon[data-size="small"] svg {
-  width: 1rem;
-  height: 1rem;
-}
-
-.canon-IconButtonIcon[data-size="medium"], .canon-IconButtonIcon[data-size="medium"] svg {
-  width: 1.25rem;
-  height: 1.25rem;
-}
-
 .canon-Link {
   font-family: var(--canon-font-regular);
   color: var(--canon-fg-link);

packages/canon/report.api.md

@@ -5,6 +5,7 @@
 ```ts
 import { Avatar as Avatar_2 } from '@base-ui-components/react/avatar';
 import { Breakpoint as Breakpoint_2 } from '@backstage/canon';
+import { ButtonProps as ButtonProps_2 } from 'react-aria-components';
 import { ChangeEvent } from 'react';
 import { Collapsible as Collapsible_2 } from '@base-ui-components/react/collapsible';
 import { ComponentProps } from 'react';
@@ -152,36 +153,42 @@ export const breakpoints: Breakpoint[];
 
 // @public (undocumented)
 export const Button: ForwardRefExoticComponent<
-  Omit<ButtonProps, 'ref'> & RefAttributes<HTMLButtonElement>
+  ButtonProps & RefAttributes<HTMLButtonElement>
 >;
 
 // @public (undocumented)
-export type ButtonOwnProps = GetPropDefTypes<typeof buttonPropDefs>;
-
-// @public (undocumented)
-export const buttonPropDefs: {
-  variant: {
-    type: 'enum';
-    values: ('primary' | 'secondary')[];
-    className: string;
-    default: 'primary';
-    responsive: true;
-  };
-  size: {
-    type: 'enum';
-    values: ('small' | 'medium')[];
-    className: string;
-    default: 'medium';
-    responsive: true;
-  };
-};
+export const ButtonIcon: ForwardRefExoticComponent<
+  ButtonIconProps & RefAttributes<HTMLButtonElement>
+>;
 
 // @public
-export interface ButtonProps extends useRender.ComponentProps<'button'> {
+export interface ButtonIconProps extends ButtonProps_2 {
+  // (undocumented)
+  icon?: ReactElement;
+  // (undocumented)
+  size?: 'small' | 'medium' | Partial<Record<Breakpoint_2, 'small' | 'medium'>>;
+  // (undocumented)
+  variant?:
+    | 'primary'
+    | 'secondary'
+    | Partial<Record<Breakpoint_2, 'primary' | 'secondary'>>;
+}
+
+// @public
+export interface ButtonProps extends ButtonProps_2 {
+  // (undocumented)
+  children?: ReactNode;
+  // (undocumented)
   iconEnd?: ReactElement;
+  // (undocumented)
   iconStart?: ReactElement;
-  size?: ButtonOwnProps['size'];
-  variant?: ButtonOwnProps['variant'];
+  // (undocumented)
+  size?: 'small' | 'medium' | Partial<Record<Breakpoint_2, 'small' | 'medium'>>;
+  // (undocumented)
+  variant?:
+    | 'primary'
+    | 'secondary'
+    | Partial<Record<Breakpoint_2, 'primary' | 'secondary'>>;
 }
 
 // @public (undocumented)
@@ -691,40 +698,6 @@ export type HeightProps = GetPropDefTypes<typeof heightPropDefs>;
 // @public (undocumented)
 export const Icon: (props: IconProps) => JSX_2.Element | null;
 
-// @public (undocumented)
-export const IconButton: ForwardRefExoticComponent<
-  IconButtonProps & RefAttributes<HTMLButtonElement>
->;
-
-// @public (undocumented)
-export type IconButtonOwnProps = GetPropDefTypes<typeof iconButtonPropDefs>;
-
-// @public (undocumented)
-export const iconButtonPropDefs: {
-  variant: {
-    type: 'enum';
-    values: ('primary' | 'secondary')[];
-    className: string;
-    default: 'primary';
-    responsive: true;
-  };
-  size: {
-    type: 'enum';
-    values: ('small' | 'medium')[];
-    className: string;
-    default: 'medium';
-    responsive: true;
-  };
-};
-
-// @public
-export interface IconButtonProps
-  extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children'> {
-  icon: ReactElement;
-  size?: IconButtonOwnProps['size'];
-  variant?: IconButtonOwnProps['variant'];
-}
-
 // @public (undocumented)
 export const IconContext: Context<IconContextProps>;
 

packages/canon/src/components/Button/Button.props.ts

@@ -1,41 +0,0 @@
-/*
- * Copyright 2025 The Backstage Authors
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import type { PropDef, GetPropDefTypes } from '../../props/prop-def';
-
-/** @public */
-export const buttonPropDefs = {
-  variant: {
-    type: 'enum',
-    values: ['primary', 'secondary'],
-    className: 'canon-Button--variant',
-    default: 'primary',
-    responsive: true,
-  },
-  size: {
-    type: 'enum',
-    values: ['small', 'medium'],
-    className: 'canon-Button--size',
-    default: 'medium',
-    responsive: true,
-  },
-} satisfies {
-  variant: PropDef<'primary' | 'secondary'>;
-  size: PropDef<'small' | 'medium'>;
-};
-
-/** @public */
-export type ButtonOwnProps = GetPropDefTypes<typeof buttonPropDefs>;

packages/canon/src/components/Button/Button.stories.tsx

@@ -18,7 +18,6 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { Button } from './Button';
 import { Flex } from '../Flex';
 import { Text } from '../Text';
-import { ButtonProps } from './types';
 import { Icon } from '../Icon';
 
 const meta = {
@@ -119,30 +118,18 @@ export const FullWidth: Story = {
 };
 
 export const Disabled: Story = {
-  args: {
-    children: 'Button',
-    disabled: true,
-  },
-  render: args => (
+  render: () => (
     <Flex direction="row" gap="4">
-      <Button {...args} variant="primary" />
-      <Button {...args} variant="secondary" />
+      <Button variant="primary" isDisabled>
+        Primary
+      </Button>
+      <Button variant="secondary" isDisabled>
+        Secondary
+      </Button>
     </Flex>
   ),
 };
 
-export const AsLink: Story = {
-  args: {
-    children: 'I am a link',
-  },
-  render: args => (
-    <Button
-      {...args}
-      render={<a href="https://canon.backstage.io" target="_blank" />}
-    />
-  ),
-};
-
 export const Responsive: Story = {
   args: {
     children: 'Button',
@@ -157,7 +144,8 @@ export const Responsive: Story = {
   },
 };
 
-const variants: string[] = ['primary', 'secondary'];
+const variants = ['primary', 'secondary'] as const;
+const sizes = ['small', 'medium'] as const;
 
 export const Playground: Story = {
   args: {
@@ -168,25 +156,22 @@ export const Playground: Story = {
       {variants.map(variant => (
         <Flex direction="column" key={variant}>
           <Text>{variant}</Text>
-          {['small', 'medium'].map(size => (
+          {sizes.map(size => (
             <Flex align="center" key={size}>
-              <Button
-                variant={variant as ButtonProps['variant']}
-                size={size as ButtonProps['size']}
-              >
+              <Button variant={variant} size={size}>
                 Button
               </Button>
               <Button
                 iconStart={<Icon name="cloud" />}
-                variant={variant as ButtonProps['variant']}
-                size={size as ButtonProps['size']}
+                variant={variant}
+                size={size}
               >
                 Button
               </Button>
               <Button
                 iconEnd={<Icon name="chevron-right" />}
-                variant={variant as ButtonProps['variant']}
-                size={size as ButtonProps['size']}
+                variant={variant}
+                size={size}
               >
                 Button
               </Button>
@@ -194,31 +179,27 @@ export const Playground: Story = {
                 iconStart={<Icon name="cloud" />}
                 iconEnd={<Icon name="chevron-right" />}
                 style={{ width: '200px' }}
-                variant={variant as ButtonProps['variant']}
-                size={size as ButtonProps['size']}
+                variant={variant}
+                size={size}
               >
                 Button
               </Button>
-              <Button
-                variant={variant as ButtonProps['variant']}
-                size={size as ButtonProps['size']}
-                disabled
-              >
+              <Button variant={variant} size={size} isDisabled>
                 Button
               </Button>
               <Button
                 iconStart={<Icon name="cloud" />}
-                variant={variant as ButtonProps['variant']}
-                size={size as ButtonProps['size']}
-                disabled
+                variant={variant}
+                size={size}
+                isDisabled
               >
                 Button
               </Button>
               <Button
                 iconEnd={<Icon name="chevron-right" />}
-                variant={variant as ButtonProps['variant']}
-                size={size as ButtonProps['size']}
-                disabled
+                variant={variant}
+                size={size}
+                isDisabled
               >
                 Button
               </Button>

packages/canon/src/components/Button/Button.tsx

@@ -14,69 +14,42 @@
  * limitations under the License.
  */
 
-import { forwardRef, useRef } from 'react';
 import clsx from 'clsx';
+import { forwardRef, Ref } from 'react';
+import { Button as RAButton } from 'react-aria-components';
 import { useResponsiveValue } from '../../hooks/useResponsiveValue';
-import { useRender } from '@base-ui-components/react/use-render';
-
 import type { ButtonProps } from './types';
 
 /** @public */
-export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
-  (props: ButtonProps, ref) => {
+export const Button = forwardRef(
+  (props: ButtonProps, ref: Ref<HTMLButtonElement>) => {
     const {
       size = 'small',
       variant = 'primary',
       iconStart,
       iconEnd,
       children,
-      render = <button />,
       className,
-      style,
       ...rest
     } = props;
 
-    // Get the responsive value for the variant
     const responsiveSize = useResponsiveValue(size);
     const responsiveVariant = useResponsiveValue(variant);
-    const internalRef = useRef<HTMLElement | null>(null);
 
-    const { renderElement } = useRender({
-      render,
-      props: {
-        className: clsx('canon-Button', className),
-        ['data-variant']: responsiveVariant,
-        ['data-size']: responsiveSize,
-        ...rest,
-        children: (
-          <>
-            {iconStart && (
-              <span
-                className="canon-ButtonIcon"
-                aria-hidden="true"
-                data-size={responsiveSize}
-              >
-                {iconStart}
-              </span>
-            )}
-            {children}
-            {iconEnd && (
-              <span
-                className="canon-ButtonIcon"
-                aria-hidden="true"
-                data-size={responsiveSize}
-              >
-                {iconEnd}
-              </span>
-            )}
-          </>
-        ),
-      },
-      refs: [ref, internalRef],
-    });
-
-    return renderElement();
+    return (
+      <RAButton
+        className={clsx('canon-Button', className)}
+        data-variant={responsiveVariant}
+        data-size={responsiveSize}
+        ref={ref}
+        {...rest}
+      >
+        {iconStart}
+        {children}
+        {iconEnd}
+      </RAButton>
+    );
   },
 );
 
-export default Button;
+Button.displayName = 'Button';

packages/canon/src/components/Button/index.ts

@@ -14,7 +14,5 @@
  * limitations under the License.
  */
 
-export { IconButton } from './IconButton';
-export type { IconButtonProps } from './types';
-export { iconButtonPropDefs } from './IconButton.props';
-export type { IconButtonOwnProps } from './IconButton.props';
+export * from './Button';
+export * from './types';

packages/canon/src/components/Button/styles.css

@@ -85,23 +85,21 @@
 .canon-Button[data-size='medium'] {
   font-size: var(--canon-font-size-4);
   padding: 0 var(--canon-space-3);
-  height: 40px;
+  height: 2.5rem;
 }
 
 .canon-Button[data-size='small'] {
   font-size: var(--canon-font-size-3);
   padding: 0 var(--canon-space-2);
-  height: 32px;
+  height: 2rem;
 }
 
-.canon-ButtonIcon[data-size='small'],
-.canon-ButtonIcon[data-size='small'] svg {
+.canon-Button[data-size='small'] svg {
   width: 1rem;
   height: 1rem;
 }
 
-.canon-ButtonIcon[data-size='medium'],
-.canon-ButtonIcon[data-size='medium'] svg {
+.canon-Button[data-size='medium'] svg {
   width: 1.25rem;
   height: 1.25rem;
 }

packages/canon/src/components/Button/types.ts

@@ -14,35 +14,22 @@
  * limitations under the License.
  */
 
-import type { ButtonOwnProps } from './Button.props';
-import { ReactElement } from 'react';
-import type { useRender } from '@base-ui-components/react/use-render';
+import { Breakpoint } from '@backstage/canon';
+import { ReactElement, ReactNode } from 'react';
+import { ButtonProps as RAButtonProps } from 'react-aria-components';
 
 /**
  * Properties for {@link Button}
  *
  * @public
  */
-export interface ButtonProps extends useRender.ComponentProps<'button'> {
-  /**
-   * The size of the button
-   * @defaultValue 'medium'
-   */
-  size?: ButtonOwnProps['size'];
-
-  /**
-   * The visual variant of the button
-   * @defaultValue 'primary'
-   */
-  variant?: ButtonOwnProps['variant'];
-
-  /**
-   * Optional icon to display at the start of the button
-   */
+export interface ButtonProps extends RAButtonProps {
+  size?: 'small' | 'medium' | Partial<Record<Breakpoint, 'small' | 'medium'>>;
+  variant?:
+    | 'primary'
+    | 'secondary'
+    | Partial<Record<Breakpoint, 'primary' | 'secondary'>>;
   iconStart?: ReactElement;
-
-  /**
-   * Optional icon to display at the end of the button
-   */
   iconEnd?: ReactElement;
+  children?: ReactNode;
 }

packages/canon/src/components/ButtonIcon/ButtonIcon.stories.tsx

@@ -15,15 +15,14 @@
  */
 
 import type { Meta, StoryObj } from '@storybook/react';
-import { IconButton } from './IconButton';
+import { ButtonIcon } from './ButtonIcon';
 import { Flex } from '../Flex';
 import { Text } from '../Text';
-import { IconButtonProps } from './types';
 import { Icon } from '../Icon';
 
 const meta = {
-  title: 'Components/IconButton',
-  component: IconButton,
+  title: 'Components/ButtonIcon',
+  component: ButtonIcon,
   argTypes: {
     size: {
       control: 'select',
@@ -34,59 +33,44 @@ const meta = {
       options: ['primary', 'secondary'],
     },
   },
-} satisfies Meta<typeof IconButton>;
+} satisfies Meta<typeof ButtonIcon>;
 
 export default meta;
 type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
-  args: {
-    icon: <Icon name="cloud" />,
-  },
+  render: () => <ButtonIcon icon={<Icon name="cloud" />} />,
 };
 
 export const Variants: Story = {
-  args: {
-    ...Default.args,
-  },
-  render: args => (
+  render: () => (
     <Flex align="center" gap="2">
-      <IconButton {...args} variant="primary" />
-      <IconButton {...args} variant="secondary" />
+      <ButtonIcon icon={<Icon name="cloud" />} variant="primary" />
+      <ButtonIcon icon={<Icon name="cloud" />} variant="secondary" />
     </Flex>
   ),
 };
 
 export const Sizes: Story = {
-  args: {
-    icon: <Icon name="cloud" />,
-  },
-  render: args => (
+  render: () => (
     <Flex align="center" gap="2">
-      <IconButton {...args} size="small" />
-      <IconButton {...args} size="medium" />
+      <ButtonIcon icon={<Icon name="cloud" />} size="small" />
+      <ButtonIcon icon={<Icon name="cloud" />} size="medium" />
     </Flex>
   ),
 };
 
 export const Disabled: Story = {
-  args: {
-    icon: <Icon name="cloud" />,
-    disabled: true,
-    'aria-label': 'Cloud icon button',
-  },
-  render: args => (
+  render: () => (
     <Flex direction="row" gap="2">
-      <IconButton {...args} variant="primary" />
-      <IconButton {...args} variant="secondary" />
+      <ButtonIcon isDisabled icon={<Icon name="cloud" />} variant="primary" />
+      <ButtonIcon isDisabled icon={<Icon name="cloud" />} variant="secondary" />
     </Flex>
   ),
 };
 
 export const Responsive: Story = {
   args: {
-    icon: <Icon name="cloud" />,
-    'aria-label': 'Cloud icon button',
     variant: {
       initial: 'primary',
       sm: 'secondary',
@@ -96,40 +80,39 @@ export const Responsive: Story = {
       sm: 'medium',
     },
   },
+  render: args => <ButtonIcon {...args} icon={<Icon name="cloud" />} />,
 };
 
-const variants: string[] = ['primary', 'secondary'];
+const variants = ['primary', 'secondary'] as const;
+const sizes = ['small', 'medium'] as const;
 
 export const Playground: Story = {
-  args: {
-    icon: <Icon name="cloud" />,
-    'aria-label': 'Cloud icon button',
-  },
   render: args => (
     <Flex direction="column">
       {variants.map(variant => (
         <Flex direction="column" key={variant}>
           <Text>{variant}</Text>
-          {['small', 'medium'].map(size => (
+          {sizes.map(size => (
             <Flex align="center" key={size}>
-              <IconButton
+              <ButtonIcon
                 {...args}
-                variant={variant as IconButtonProps['variant']}
-                size={size as IconButtonProps['size']}
+                variant={variant}
+                size={size}
+                icon={<Icon name="cloud" />}
               />
-              <IconButton
+              <ButtonIcon
                 {...args}
                 icon={<Icon name="chevron-right" />}
                 aria-label="Chevron right icon button"
-                variant={variant as IconButtonProps['variant']}
-                size={size as IconButtonProps['size']}
+                variant={variant}
+                size={size}
               />
-              <IconButton
+              <ButtonIcon
                 {...args}
                 icon={<Icon name="chevron-right" />}
                 aria-label="Chevron right icon button"
-                variant={variant as IconButtonProps['variant']}
-                size={size as IconButtonProps['size']}
+                variant={variant}
+                size={size}
               />
             </Flex>
           ))}

packages/canon/src/components/ButtonIcon/ButtonIcon.tsx

@@ -14,15 +14,15 @@
  * limitations under the License.
  */
 
-import { forwardRef } from 'react';
 import clsx from 'clsx';
+import { forwardRef, Ref } from 'react';
+import { Button as RAButton } from 'react-aria-components';
 import { useResponsiveValue } from '../../hooks/useResponsiveValue';
-
-import type { IconButtonProps } from './types';
+import type { ButtonIconProps } from './types';
 
 /** @public */
-export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
-  (props: IconButtonProps, ref) => {
+export const ButtonIcon = forwardRef(
+  (props: ButtonIconProps, ref: Ref<HTMLButtonElement>) => {
     const {
       size = 'small',
       variant = 'primary',
@@ -36,24 +36,17 @@ export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
     const responsiveVariant = useResponsiveValue(variant);
 
     return (
-      <button
-        ref={ref}
-        className={clsx('canon-IconButton', className)}
-        data-size={responsiveSize}
+      <RAButton
+        className={clsx('canon-Button', 'canon-ButtonIcon', className)}
         data-variant={responsiveVariant}
-        style={style}
+        data-size={responsiveSize}
+        ref={ref}
         {...rest}
       >
-        <span
-          className="canon-IconButtonIcon"
-          aria-hidden="true"
-          data-size={responsiveSize}
-        >
-          {icon}
-        </span>
-      </button>
+        {icon}
+      </RAButton>
     );
   },
 );
 
-export default IconButton;
+ButtonIcon.displayName = 'ButtonIcon';

packages/canon/src/components/ButtonIcon/index.tsx

@@ -13,7 +13,6 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-export { Button } from './Button';
-export type { ButtonProps } from './types';
-export { buttonPropDefs } from './Button.props';
-export type { ButtonOwnProps } from './Button.props';
+
+export * from './ButtonIcon';
+export * from './types';

packages/canon/src/components/ButtonIcon/styles.css

@@ -0,0 +1,30 @@
+/*
+ * Copyright 2024 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+.canon-ButtonIcon {
+  align-items: center;
+  justify-content: center;
+}
+
+.canon-ButtonIcon[data-size='small'] {
+  padding: 0;
+  width: 2rem;
+}
+
+.canon-ButtonIcon[data-size='medium'] {
+  padding: 0;
+  width: 2.5rem;
+}

packages/canon/src/components/ButtonIcon/types.ts

@@ -14,30 +14,20 @@
  * limitations under the License.
  */
 
-import type { IconButtonOwnProps } from './IconButton.props';
+import { Breakpoint } from '@backstage/canon';
 import { ReactElement } from 'react';
+import { ButtonProps as RAButtonProps } from 'react-aria-components';
 
 /**
- * Properties for {@link IconButton}
+ * Properties for {@link ButtonIcon}
  *
  * @public
  */
-export interface IconButtonProps
-  extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children'> {
-  /**
-   * The size of the button
-   * @defaultValue 'medium'
-   */
-  size?: IconButtonOwnProps['size'];
-
-  /**
-   * The visual variant of the button
-   * @defaultValue 'primary'
-   */
-  variant?: IconButtonOwnProps['variant'];
-
-  /**
-   * Icon to display in the button
-   */
-  icon: ReactElement;
+export interface ButtonIconProps extends RAButtonProps {
+  size?: 'small' | 'medium' | Partial<Record<Breakpoint, 'small' | 'medium'>>;
+  variant?:
+    | 'primary'
+    | 'secondary'
+    | Partial<Record<Breakpoint, 'primary' | 'secondary'>>;
+  icon?: ReactElement;
 }

packages/canon/src/components/ButtonLink/ButtonLink.stories.tsx

@@ -0,0 +1,212 @@
+/*
+ * Copyright 2024 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import type { Meta, StoryObj } from '@storybook/react';
+import { ButtonLink } from './ButtonLink';
+import { Flex } from '../Flex';
+import { Text } from '../Text';
+import { Icon } from '../Icon';
+
+const meta = {
+  title: 'Components/ButtonLink',
+  component: ButtonLink,
+  argTypes: {
+    size: {
+      control: 'select',
+      options: ['small', 'medium'],
+    },
+    variant: {
+      control: 'select',
+      options: ['primary', 'secondary'],
+    },
+  },
+} satisfies Meta<typeof ButtonLink>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    children: 'Button',
+  },
+};
+
+export const Variants: Story = {
+  render: () => (
+    <Flex align="center">
+      <ButtonLink
+        iconStart={<Icon name="cloud" />}
+        variant="primary"
+        href="https://canon.backstage.io"
+        target="_blank"
+      >
+        Button
+      </ButtonLink>
+      <ButtonLink
+        iconStart={<Icon name="cloud" />}
+        variant="secondary"
+        href="https://canon.backstage.io"
+        target="_blank"
+      >
+        Button
+      </ButtonLink>
+    </Flex>
+  ),
+};
+
+export const Sizes: Story = {
+  args: {
+    children: 'Button',
+  },
+  render: () => (
+    <Flex align="center">
+      <ButtonLink size="small" iconStart={<Icon name="cloud" />}>
+        Small
+      </ButtonLink>
+      <ButtonLink size="medium" iconStart={<Icon name="cloud" />}>
+        Medium
+      </ButtonLink>
+    </Flex>
+  ),
+};
+
+export const WithIcons: Story = {
+  args: {
+    children: 'Button',
+  },
+  render: args => (
+    <Flex align="center">
+      <ButtonLink {...args} iconStart={<Icon name="cloud" />} />
+      <ButtonLink {...args} iconEnd={<Icon name="chevron-right" />} />
+      <ButtonLink
+        {...args}
+        iconStart={<Icon name="cloud" />}
+        iconEnd={<Icon name="chevron-right" />}
+      />
+    </Flex>
+  ),
+};
+
+export const FullWidth: Story = {
+  args: {
+    children: 'Button',
+  },
+  render: args => (
+    <Flex direction="column" gap="4" style={{ width: '300px' }}>
+      <ButtonLink {...args} iconStart={<Icon name="cloud" />} />
+      <ButtonLink {...args} iconEnd={<Icon name="chevron-right" />} />
+      <ButtonLink
+        {...args}
+        iconStart={<Icon name="cloud" />}
+        iconEnd={<Icon name="chevron-right" />}
+      />
+    </Flex>
+  ),
+};
+
+export const Disabled: Story = {
+  render: () => (
+    <Flex direction="row" gap="4">
+      <ButtonLink variant="primary" isDisabled>
+        Primary
+      </ButtonLink>
+      <ButtonLink variant="secondary" isDisabled>
+        Secondary
+      </ButtonLink>
+    </Flex>
+  ),
+};
+
+export const Responsive: Story = {
+  args: {
+    children: 'Button',
+    variant: {
+      initial: 'primary',
+      sm: 'secondary',
+    },
+    size: {
+      xs: 'small',
+      sm: 'medium',
+    },
+  },
+};
+
+const variants = ['primary', 'secondary'] as const;
+const sizes = ['small', 'medium'] as const;
+
+export const Playground: Story = {
+  args: {
+    children: 'Button',
+  },
+  render: () => (
+    <Flex direction="column">
+      {variants.map(variant => (
+        <Flex direction="column" key={variant}>
+          <Text>{variant}</Text>
+          {sizes.map(size => (
+            <Flex align="center" key={size}>
+              <ButtonLink variant={variant} size={size}>
+                Button
+              </ButtonLink>
+              <ButtonLink
+                iconStart={<Icon name="cloud" />}
+                variant={variant}
+                size={size}
+              >
+                Button
+              </ButtonLink>
+              <ButtonLink
+                iconEnd={<Icon name="chevron-right" />}
+                variant={variant}
+                size={size}
+              >
+                Button
+              </ButtonLink>
+              <ButtonLink
+                iconStart={<Icon name="cloud" />}
+                iconEnd={<Icon name="chevron-right" />}
+                style={{ width: '200px' }}
+                variant={variant}
+                size={size}
+              >
+                Button
+              </ButtonLink>
+              <ButtonLink variant={variant} size={size} isDisabled>
+                Button
+              </ButtonLink>
+              <ButtonLink
+                iconStart={<Icon name="cloud" />}
+                variant={variant}
+                size={size}
+                isDisabled
+              >
+                Button
+              </ButtonLink>
+              <ButtonLink
+                iconEnd={<Icon name="chevron-right" />}
+                variant={variant}
+                size={size}
+                isDisabled
+              >
+                Button
+              </ButtonLink>
+            </Flex>
+          ))}
+        </Flex>
+      ))}
+    </Flex>
+  ),
+};

packages/canon/src/components/ButtonLink/ButtonLink.tsx

@@ -0,0 +1,55 @@
+/*
+ * Copyright 2024 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import clsx from 'clsx';
+import { forwardRef, Ref } from 'react';
+import { Link as RALink } from 'react-aria-components';
+import { useResponsiveValue } from '../../hooks/useResponsiveValue';
+import type { ButtonLinkProps } from './types';
+
+/** @public */
+export const ButtonLink = forwardRef(
+  (props: ButtonLinkProps, ref: Ref<HTMLAnchorElement>) => {
+    const {
+      size = 'small',
+      variant = 'primary',
+      iconStart,
+      iconEnd,
+      children,
+      className,
+      ...rest
+    } = props;
+
+    const responsiveSize = useResponsiveValue(size);
+    const responsiveVariant = useResponsiveValue(variant);
+
+    return (
+      <RALink
+        className={clsx('canon-Button', 'canon-ButtonLink', className)}
+        data-variant={responsiveVariant}
+        data-size={responsiveSize}
+        ref={ref}
+        {...rest}
+      >
+        {iconStart}
+        {children}
+        {iconEnd}
+      </RALink>
+    );
+  },
+);
+
+ButtonLink.displayName = 'ButtonLink';

packages/canon/src/components/ButtonLink/index.ts

@@ -0,0 +1,18 @@
+/*
+ * Copyright 2024 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export * from './ButtonLink';
+export * from './types';

packages/canon/src/components/ButtonLink/types.ts

@@ -0,0 +1,35 @@
+/*
+ * Copyright 2024 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Breakpoint } from '@backstage/canon';
+import { ReactElement, ReactNode } from 'react';
+import { LinkProps as RALinkProps } from 'react-aria-components';
+
+/**
+ * Properties for {@link ButtonLink}
+ *
+ * @public
+ */
+export interface ButtonLinkProps extends RALinkProps {
+  size?: 'small' | 'medium' | Partial<Record<Breakpoint, 'small' | 'medium'>>;
+  variant?:
+    | 'primary'
+    | 'secondary'
+    | Partial<Record<Breakpoint, 'primary' | 'secondary'>>;
+  iconStart?: ReactElement;
+  iconEnd?: ReactElement;
+  children?: ReactNode;
+}

packages/canon/src/components/DataTable/Pagination/DataTablePagination.tsx

@@ -17,7 +17,7 @@
 import { forwardRef } from 'react';
 import { Text } from '../../Text';
 import { DataTablePaginationProps } from './types';
-import { IconButton } from '../../IconButton';
+import { ButtonIcon } from '../../ButtonIcon';
 import clsx from 'clsx';
 import { Select } from '../../Select';
 import { useDataTable } from '../Root/DataTableRoot';
@@ -71,18 +71,18 @@ const DataTablePagination = forwardRef(
         </div>
         <div className="canon-DataTablePagination--right">
           <Text variant="body">{`${fromCount} - ${toCount} of ${rowCount}`}</Text>
-          <IconButton
+          <ButtonIcon
             variant="secondary"
             size="small"
             onClick={() => table?.previousPage()}
-            disabled={!table?.getCanPreviousPage()}
+            isDisabled={!table?.getCanPreviousPage()}
             icon={<Icon name="chevron-left" />}
           />
-          <IconButton
+          <ButtonIcon
             variant="secondary"
             size="small"
             onClick={() => table?.nextPage()}
-            disabled={!table?.getCanNextPage()}
+            isDisabled={!table?.getCanNextPage()}
             icon={<Icon name="chevron-right" />}
           />
         </div>

packages/canon/src/components/IconButton/IconButton.props.ts

@@ -1,41 +0,0 @@
-/*
- * Copyright 2025 The Backstage Authors
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import type { PropDef, GetPropDefTypes } from '../../props/prop-def';
-
-/** @public */
-export const iconButtonPropDefs = {
-  variant: {
-    type: 'enum',
-    values: ['primary', 'secondary'],
-    className: 'canon-Button--variant',
-    default: 'primary',
-    responsive: true,
-  },
-  size: {
-    type: 'enum',
-    values: ['small', 'medium'],
-    className: 'canon-Button--size',
-    default: 'medium',
-    responsive: true,
-  },
-} satisfies {
-  variant: PropDef<'primary' | 'secondary'>;
-  size: PropDef<'small' | 'medium'>;
-};
-
-/** @public */
-export type IconButtonOwnProps = GetPropDefTypes<typeof iconButtonPropDefs>;

packages/canon/src/components/IconButton/styles.css

@@ -1,107 +0,0 @@
-/*
- * Copyright 2024 The Backstage Authors
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-.canon-IconButton {
-  border: none;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  user-select: none;
-  font-family: var(--canon-font-regular);
-  font-weight: var(--canon-font-weight-bold);
-  padding: 0;
-  cursor: pointer;
-  border-radius: var(--canon-radius-2);
-  gap: var(--canon-space-1_5);
-
-  &:disabled {
-    cursor: not-allowed;
-  }
-}
-
-.canon-IconButton[data-variant='primary'] {
-  background-color: var(--canon-bg-solid);
-  color: var(--canon-fg-solid);
-  transition: background-color 150ms ease, box-shadow 150ms ease;
-
-  &:hover {
-    background-color: var(--canon-bg-solid-hover);
-  }
-
-  &:active {
-    background-color: var(--canon-bg-solid-pressed);
-  }
-
-  &:focus-visible {
-    outline: 2px solid var(--canon-ring);
-    outline-offset: 2px;
-  }
-
-  &:disabled {
-    background-color: var(--canon-bg-solid-disabled);
-    color: var(--canon-fg-solid-disabled);
-  }
-}
-
-.canon-IconButton[data-variant='secondary'] {
-  background-color: var(--canon-bg-surface-1);
-  box-shadow: inset 0 0 0 1px var(--canon-border);
-  color: var(--canon-fg-primary);
-  transition: box-shadow 150ms ease;
-
-  &:hover {
-    box-shadow: inset 0 0 0 1px var(--canon-border-hover);
-  }
-
-  &:active {
-    box-shadow: inset 0 0 0 1px var(--canon-border-pressed);
-  }
-
-  &:focus-visible {
-    outline: none;
-    transition: none;
-    box-shadow: inset 0 0 0 2px var(--canon-ring);
-  }
-
-  &:disabled {
-    box-shadow: inset 0 0 0 1px var(--canon-border-disabled);
-    color: var(--canon-fg-disabled);
-  }
-}
-
-.canon-IconButton[data-size='medium'] {
-  font-size: var(--canon-font-size-4);
-  height: 40px;
-  width: 40px;
-}
-
-.canon-IconButton[data-size='small'] {
-  font-size: var(--canon-font-size-3);
-  height: 32px;
-  width: 32px;
-}
-
-.canon-IconButtonIcon[data-size='small'],
-.canon-IconButtonIcon[data-size='small'] svg {
-  width: 1rem;
-  height: 1rem;
-}
-
-.canon-IconButtonIcon[data-size='medium'],
-.canon-IconButtonIcon[data-size='medium'] svg {
-  width: 1.25rem;
-  height: 1.25rem;
-}

packages/canon/src/css/components.css

@@ -17,6 +17,7 @@
 @import '../components/Avatar/Avatar.styles.css';
 @import '../components/Box/styles.css';
 @import '../components/Button/styles.css';
+@import '../components/ButtonIcon/styles.css';
 @import '../components/Checkbox/styles.css';
 @import '../components/Collapsible/Collapsible.styles.css';
 @import '../components/Container/styles.css';
@@ -27,7 +28,6 @@
 @import '../components/Grid/styles.css';
 @import '../components/Heading/styles.css';
 @import '../components/Icon/styles.css';
-@import '../components/IconButton/styles.css';
 @import '../components/Link/styles.css';
 @import '../components/Menu/Menu.styles.css';
 @import '../components/Table/styles.css';

packages/canon/src/index.ts

@@ -38,7 +38,7 @@ export * from './components/Collapsible';
 export * from './components/DataTable';
 export * from './components/FieldLabel';
 export * from './components/Icon';
-export * from './components/IconButton';
+export * from './components/ButtonIcon';
 export * from './components/Checkbox';
 export * from './components/Table';
 export * from './components/Tabs';