updates button variants and adds slot

packages/docs/src/stories/Button.stories.tsx

@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
+import { Cog6ToothIcon } from '@heroicons/react/24/solid';
 import { Button } from '@wolves-league-ui/react';
 
 const meta: Meta<typeof Button> = {
@@ -12,10 +13,15 @@ const meta: Meta<typeof Button> = {
     children: { control: 'text', defaultValue: 'Button Text' },
     variant: {
       control: 'select',
-      options: ['primary', 'secondary', 'tertiary'],
+      options: ['primary', 'secondary', 'highlight', 'link'],
+    },
+    size: {
+      control: 'select',
+      options: ['sm', 'md', 'lg', 'icon'],
     },
     disabled: { control: 'boolean' },
     onClick: { table: { disable: true }, action: 'clicked' },
+    asChild: { control: 'boolean' },
   },
 };
 
@@ -37,9 +43,49 @@ export const Secondary: Story = {
   },
 };
 
-export const Tertiary: Story = {
+export const Highlight: Story = {
   args: {
     children: 'Button Text',
-    variant: 'tertiary',
+    variant: 'highlight',
+  },
+};
+
+export const Link: Story = {
+  args: {
+    children: <a href="javascript:void(0)">Button Text</a>,
+    variant: 'link',
+    asChild: true,
+  },
+  argTypes: {
+    children: {
+      control: false,
+    },
+  },
+};
+
+export const TextWithIcon: Story = {
+  args: {
+    children: (
+      <>
+        <Cog6ToothIcon width="24" height="24" /> Button Text
+      </>
+    ),
+  },
+  argTypes: {
+    children: {
+      control: false,
+    },
+  },
+};
+
+export const Icon: Story = {
+  args: {
+    children: <Cog6ToothIcon width="24" height="24" />,
+    size: 'icon',
+  },
+  argTypes: {
+    children: {
+      control: false,
+    },
   },
 };

packages/react/src/components/Button.tsx

@@ -1,25 +1,39 @@
+import { Slot } from '@radix-ui/react-slot';
 import { ComponentPropsWithoutRef } from 'react';
 import { VariantProps, tv } from 'tailwind-variants';
 
 const button = tv({
-  base: 'py-1 px-2 rounded-md transition-all ease-in-out border border-transparent font-medium text-sm disabled:text-gray400 disabled:border-dashed disabled:border-gray400 disabled:bg-transparent disabled:cursor-not-allowed',
+  base: 'inline-flex gap-2 px-4 py-2 rounded-lg transition-all ease-in-out border border-transparent font-medium transform active:scale-95 disabled:text-gray400 disabled:border-dashed disabled:border-gray400 disabled:bg-transparent disabled:cursor-not-allowed',
   variants: {
     variant: {
-      primary: 'bg-wl700 text-white hover:bg-wl900',
+      primary: 'bg-gray900 text-gray100 hover:bg-gray600',
       secondary:
-        'dark:border-white dark:text-white dark:hover:bg-white dark:hover:text-wl700 border-gray900 text-gray900 hover:bg-gray900 hover:text-wl300',
-      tertiary:
-        'text-gray900 hover:text-gray400 dark:text-white dark:hover:text-gray100 disabled:border-transparent',
+        'dark:border-white dark:text-white dark:hover:bg-white dark:hover:text-wl700 border-gray900 text-gray900 hover:bg-gray900 hover:text-gray100',
+      highlight: 'bg-wl700 text-white hover:bg-wl900',
+      link: 'underline-offset-4 hover:underline',
     },
+    size: {
+      sm: 'text-sm',
+      md: 'text-md',
+      lg: 'text-lg',
+      icon: 'p-2 text-white',
+    },
+  },
+  defaultVariants: {
+    variant: 'primary',
+    size: 'md',
   },
 });
 
-type ButtonProps = ComponentPropsWithoutRef<'button'> & VariantProps<typeof button>;
+interface ButtonProps extends ComponentPropsWithoutRef<'button'>, VariantProps<typeof button> {
+  asChild?: boolean;
+}
 
-export function Button({ children, variant, ...props }: ButtonProps) {
+export function Button({ children, variant, size, asChild = false, ...props }: ButtonProps) {
+  const Comp = asChild ? Slot : 'button';
   return (
-    <button className={button({ variant })} {...props}>
+    <Comp className={button({ variant, size })} {...props}>
       {children}
-    </button>
+    </Comp>
   );
 }