FIXED: Interfaces

src/primitive-components/button-layout/button-layout.tsx

@@ -7,16 +7,14 @@ import useRippleEffect from '../ripple/hooks/useRippleEffect';
 import React, { forwardRef, useId, useRef, useState } from 'react';
 
 export const ButtonLayout = forwardRef<HTMLButtonElement, ButtonLayoutProps>(
-    function ButtonBase({ centralRipple = false, ...props }, ref) {
+    ({ centralRipple = false, variant, ...props }, ref) => {
         const [isActive, setIsActive] = useState<boolean>(false),
             ripplesRef = useRef(null),
             buttonId = useId(),
             events = useRippleEffect(ripplesRef, setIsActive);
 
-        const { variant, disabled, className } = props;
-
-        const classes = className
-            ? `m3 ${className} ${variant}${isActive ? ' is-active' : ''}`
+        const classes = props.className
+            ? `m3 ${props.className} ${variant}${isActive ? ' is-active' : ''}`
             : `m3 ${variant}${isActive ? ' is-active' : ''}`;
 
         return (
@@ -24,7 +22,7 @@ export const ButtonLayout = forwardRef<HTMLButtonElement, ButtonLayoutProps>(
                 {...props}
                 {...events}
                 className={classes}
-                disabled={disabled}
+                disabled={props.disabled}
                 id={buttonId}
                 ref={ref}
             >
@@ -40,6 +38,7 @@ export const ButtonLayout = forwardRef<HTMLButtonElement, ButtonLayoutProps>(
 );
 
 ButtonLayout.propTypes = {
+    variant: string,
     centralRipple: bool,
     children: string,
 };