chore(Button): updated to 5.0.0

Author: benjitrosch

src/Button/Button.stories.tsx

@@ -47,6 +47,102 @@ export const BrandColors: Story<ButtonProps> = (args) => {
 }
 BrandColors.args = {}
 
+export const SoftStyle: Story<ButtonProps> = (args) => {
+  return (
+    <div className="flex items-center gap-2">
+      <Button {...args}>Default</Button>
+      <Button {...args} color="primary">
+        Primary
+      </Button>
+      <Button {...args} color="secondary">
+        Secondary
+      </Button>
+      <Button {...args} color="accent">
+        Accent
+      </Button>
+      <Button {...args} color="info">
+        Info
+      </Button>
+      <Button {...args} color="success">
+        Success
+      </Button>
+      <Button {...args} color="warning">
+        Warning
+      </Button>
+      <Button {...args} color="error">
+        Error
+      </Button>
+    </div>
+  )
+}
+SoftStyle.args = {
+  variant: 'soft',
+}
+
+export const OutlineStyle: Story<ButtonProps> = (args) => {
+  return (
+    <div className="flex items-center gap-2">
+      <Button {...args}>Default</Button>
+      <Button {...args} color="primary">
+        Primary
+      </Button>
+      <Button {...args} color="secondary">
+        Secondary
+      </Button>
+      <Button {...args} color="accent">
+        Accent
+      </Button>
+      <Button {...args} color="info">
+        Info
+      </Button>
+      <Button {...args} color="success">
+        Success
+      </Button>
+      <Button {...args} color="warning">
+        Warning
+      </Button>
+      <Button {...args} color="error">
+        Error
+      </Button>
+    </div>
+  )
+}
+OutlineStyle.args = {
+  variant: 'outline',
+}
+
+export const DashStyle: Story<ButtonProps> = (args) => {
+  return (
+    <div className="flex items-center gap-2">
+      <Button {...args}>Default</Button>
+      <Button {...args} color="primary">
+        Primary
+      </Button>
+      <Button {...args} color="secondary">
+        Secondary
+      </Button>
+      <Button {...args} color="accent">
+        Accent
+      </Button>
+      <Button {...args} color="info">
+        Info
+      </Button>
+      <Button {...args} color="success">
+        Success
+      </Button>
+      <Button {...args} color="warning">
+        Warning
+      </Button>
+      <Button {...args} color="error">
+        Error
+      </Button>
+    </div>
+  )
+}
+DashStyle.args = {
+  variant: 'dash',
+}
+
 export const ActiveButtons: Story<ButtonProps> = (args) => {
   return (
     <div className="flex items-center gap-2">

src/Button/Button.tsx

@@ -7,6 +7,7 @@ import {
   IComponentBaseProps,
   ComponentColor,
   ComponentShape,
+  ComponentVariant,
   ComponentSize,
 } from '../types'
 
@@ -52,8 +53,8 @@ export type ButtonProps<
   IComponentBaseProps & {
     shape?: ComponentShape
     size?: ComponentSize
-    variant?: 'outline' | 'link'
     color?: ComponentColor
+    variant?: ComponentVariant | 'link'
     glass?: boolean
     wide?: boolean
     fullWidth?: boolean
@@ -115,12 +116,15 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>(
       'btn',
       className,
       clsx(((startIcon && !loading) || endIcon) && 'gap-2', {
+        'btn-xl': size === 'xl',
         'btn-lg': size === 'lg',
         'btn-md': size === 'md',
         'btn-sm': size === 'sm',
         'btn-xs': size === 'xs',
         'btn-circle': shape === 'circle',
         'btn-square': shape === 'square',
+        'btn-soft': variant === 'soft',
+        'btn-dash': variant === 'dash',
         'btn-outline': variant === 'outline',
         'btn-link': variant === 'link',
         'btn-neutral': color === 'neutral',