fix link button on mobile

actifyjs · Oct 18, 2024 · a0756b0 · a0756b0
1 parent ff4d5fc
commit a0756b0
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 1 deletion.
diff --git a/apps/docs/src/app/page.tsx b/apps/docs/src/app/page.tsx
@@ -28,6 +28,7 @@ export default function Page() {
             href="/getting-started/installation"
           >
             <Button
+              asLink
               variant="filled"
               className="max-sm:w-full flex justify-center"
             >
@@ -41,6 +42,7 @@ export default function Page() {
             href="/getting-started/why-actify"
           >
             <Button
+              asLink
               variant="tonal"
               className="max-sm:w-full flex justify-center"
             >
@@ -55,6 +57,7 @@ export default function Page() {
             href="https://github.com/actifyjs/actify"
           >
             <Button
+              asLink
               variant="outlined"
               className="max-sm:w-full flex justify-center"
             >

diff --git a/apps/docs/src/components/Sponsors.tsx b/apps/docs/src/components/Sponsors.tsx
@@ -9,6 +9,7 @@ const Sponsors = () => {
       <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-2 items-center">
         <a tabIndex={-1} target="_blank" href="https://www.taildoor.com">
           <Button
+            asLink
             variant="text"
             className="[--md-text-button-container-height:64px] [--md-text-button-container-shape:0]"
           >
@@ -17,6 +18,7 @@ const Sponsors = () => {
         </a>
         <a tabIndex={-1} target="_blank" href="https://ngroker.com">
           <Button
+            asLink
             variant="text"
             className="[--md-text-button-container-height:64px] [--md-text-button-container-shape:0]"
           >

diff --git a/packages/actify/src/components/Button/Button.tsx b/packages/actify/src/components/Button/Button.tsx
@@ -18,6 +18,7 @@ import variants from './styles/variant.module.css'
 
 type ButtonProps = {
   ripple?: boolean
+  asLink?: boolean
   trailingIcon?: boolean
   popoverTarget?: string
   popoverTargetAction?: 'show' | 'toggle' | 'hide'
@@ -31,6 +32,7 @@ const Button = (props: ButtonProps) => {
     id,
     ref,
     style,
+    asLink,
     ripple = true,
     color = 'primary',
     variant = 'elevated',
@@ -65,7 +67,7 @@ const Button = (props: ButtonProps) => {
         disabled={disabled}
         ref={ref || buttonRef}
         className={buttons['button']}
-        {...mergeProps(buttonProps, focusProps)}
+        {...mergeProps(asLink ? null : buttonProps, focusProps)}
       >
         <span className={buttons['touch']} />
         <span className={buttons['label']}>{children}</span>