feat: add button link component

components/Button/Button.stories.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { ComponentStory, ComponentMeta } from '@storybook/react';
 
-import { ButtonForStory } from './Button';
+import { ButtonForStory, LinkButton } from './Button';
 import { Flex } from '../Flex';
 import { Text } from '../Text';
 import { InfoCircledIcon } from '@radix-ui/react-icons';
@@ -86,3 +86,9 @@ export const Waiting = Template.bind({});
 Waiting.args = {
   state: 'waiting',
 };
+
+const LinkTemplate: ComponentStory<typeof LinkButton> = (args) => (<LinkButton {...args}>Link</LinkButton>)
+export const Link = LinkTemplate.bind({});
+Link.args = {
+  href: `https://traefik.io`,
+};

components/Button/Button.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import { styled, keyframes, CSS } from '../../stitches.config';
 import { modifyVariantsForStory } from '../../utils/modifyVariantsForStory';
 
-export const StyledButton = styled('button', {
+const buttonStyles = {
   // Reset
   all: 'unset',
   alignItems: 'center',
@@ -234,8 +234,12 @@ export const StyledButton = styled('button', {
     size: 'medium',
     variant: 'primary',
   },
-});
+}
+
+export const StyledLinkButton = styled('a', buttonStyles);
+export const StyledButton = styled('button', buttonStyles);
 
+type LinkButtonVariants = VariantProps<typeof StyledLinkButton>;
 type ButtonVariants = VariantProps<typeof StyledButton>;
 
 const Waiting = styled('div', {
@@ -281,8 +285,20 @@ const Waiting = styled('div', {
   },
 });
 
+type LinkButtonProps = React.AnchorHTMLAttributes<any> & LinkButtonVariants & { css?: CSS };
 type ButtonProps = React.ButtonHTMLAttributes<any> & ButtonVariants & { css?: CSS };
 
+export const LinkButton = React.forwardRef<React.ElementRef<typeof StyledLinkButton>, LinkButtonProps>(
+  ({ children, ...props }, forwardedRef) => (
+    <StyledLinkButton {...props} ref={forwardedRef}>
+      <>
+        {children}
+        {props.state === 'waiting' && <Waiting size={props.size} />}
+      </>
+    </StyledLinkButton>
+  )
+)
+
 export const Button = React.forwardRef<React.ElementRef<typeof StyledButton>, ButtonProps>(
   ({ children, ...props }, forwardedRef) => {
     return (

index.ts

@@ -13,7 +13,7 @@ export { AspectRatio } from '@radix-ui/react-aspect-ratio';
 export { Badge } from './components/Badge';
 export { Box } from './components/Box';
 export { Bubble } from './components/Bubble';
-export { Button } from './components/Button';
+export { Button, LinkButton } from './components/Button';
 export { Card } from './components/Card';
 export { Checkbox } from './components/Checkbox';
 // export { Code } from './components/Code';