@latte-macchiat-io/latte-vanilla-components 0.0.335 → 0.0.336

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@latte-macchiat-io/latte-vanilla-components",
-  "version": "0.0.335",
+  "version": "0.0.336",
   "description": "Beautiful components for amazing projects, with a touch of Vanilla 🥤",
   "type": "module",
   "main": "./src/index.ts",

package/src/components/Button/index.tsx

@@ -1,9 +1,12 @@
 import { clsx } from 'clsx';
 
 import { buttonRecipe, type ButtonVariants } from './styles.css';
+import { AllowedButton } from './types';
 
-export type ButtonProps = React.HTMLAttributes<HTMLButtonElement> &
+export type ButtonProps = React.HTMLAttributes<HTMLButtonElement | HTMLAnchorElement> &
   ButtonVariants & {
+    href?: string;
+    as: AllowedButton;
     isPending?: boolean;
     isDisabled?: boolean;
     translation?: {
@@ -16,14 +19,26 @@ export const Button = ({
   style,
   variant,
   onClick,
+  as = 'a',
+  href = '',
   children,
   fullWidth,
   className,
   isPending = false,
   isDisabled = false,
   translation = { isPendingLabel: 'Loading...' },
-}: ButtonProps) => (
-  <button onClick={onClick} disabled={isDisabled || isPending} className={clsx(buttonRecipe({ variant, style, size, fullWidth }), className)}>
-    {isPending ? translation.isPendingLabel : children}
-  </button>
-);
+}: ButtonProps) => {
+  if (as === 'a') {
+    return (
+      <a href={href} className={clsx(buttonRecipe({ variant, style, size, fullWidth }), className)}>
+        {children}
+      </a>
+    );
+  }
+
+  return (
+    <button onClick={onClick} disabled={isDisabled || isPending} className={clsx(buttonRecipe({ variant, style, size, fullWidth }), className)}>
+      {isPending ? translation.isPendingLabel : children}
+    </button>
+  );
+};

package/src/components/Button/types.tsx

@@ -0,0 +1 @@
+export type AllowedButton = 'button' | 'a';