Merge pull request #7471 from backstage/emmaindal/styles-button-as-link-contained

Button Component styling issue

.changeset/seven-oranges-hunt.md

@@ -0,0 +1,5 @@
+---
+'@backstage/core-components': patch
+---
+
+Wrap up the `Link` component in a component to reset the color so that we can actually see the button text

packages/core-components/src/components/Button/Button.tsx

@@ -40,8 +40,13 @@ export type ButtonProps = MaterialButtonProps &
  */
 declare function ButtonType(props: ButtonProps): JSX.Element;
 
+/**
+ * This wrapper is here to reset the color of the Link and make typescript happy.
+ */
+const LinkWrapper = (props: LinkProps) => <Link {...props} color="initial" />;
+
 const ActualButton = React.forwardRef<any, ButtonProps>((props, ref) => (
-  <MaterialButton ref={ref} component={Link} {...props} />
+  <MaterialButton ref={ref} component={LinkWrapper} {...props} />
 )) as { (props: ButtonProps): JSX.Element };
 
 // TODO(Rugvip): We use this as a workaround to make the exported type be a