CHANGED: README

src/primitive-components/button/button.tsx

@@ -4,6 +4,7 @@ import { forwardRef } from 'react';
 import { Icon } from '../components';
 import { ButtonProps } from './button.types';
 import { ButtonLayout } from '../button-layout/button-layout';
+import { bool, oneOf, string } from 'prop-types';
 
 /**
  * Button component
@@ -12,18 +13,32 @@ import { ButtonLayout } from '../button-layout/button-layout';
 
 export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
     (
-        { centralRipple = false, variant, disabled = false, icon, ...props },
+        {
+            icon,
+            className = '',
+            disabled = false,
+            variant = 'filled',
+            centralRipple = false,
+            ...props
+        },
         ref,
     ) => (
         <ButtonLayout
             {...props}
             centralRipple={centralRipple}
+            className={`${variant} ${className}`}
             disabled={disabled}
             ref={ref}
-            variant={variant ? variant : 'filled'}
         >
             {icon ? <Icon iconSize={20}>{icon}</Icon> : <></>}
             <span className={'label-large'}>{props.children}</span>
         </ButtonLayout>
     ),
 );
+
+Button.propTypes = {
+    icon: string,
+    children: string,
+    centralRipple: bool,
+    variant: oneOf(['filled', 'outlined', 'elevated', 'tonal', 'text']),
+};