Repository: Avaiga/taipy
File: frontend/taipy-gui/src/components/Taipy/Button.tsx (TypeScript)

Code before:
import { getComponentClassName } from "./TaipyStyle";

interface ButtonProps extends TaipyActiveProps {
    onAction?: string;
    label: string;
    defaultLabel?: string;
    width?: string | number;
    size?: "small" | "medium" | "large";
    variant?: "text" | "outlined" | "contained";
}

const cardSx = { p: 0 };

const Button = (props: ButtonProps) => {
    const { id, onAction = "", defaultLabel, size = "medium", variant = "outlined" } = props;
    const [value, setValue] = useState<stringIcon>("");
    const dispatch = useDispatch();
    const module = useModule();

    const className = useClassNames(props.libClassName, props.dynamicClassName, props.className);
    const active = useDynamicProperty(props.active, props.defaultActive, true);
    const hover = useDynamicProperty(props.hoverText, props.defaultHoverText, undefined);
    const buttonSx = useMemo(() => ({
        minHeight: getInputButtonHeight(props.size),
        ...(props.width && { width: getCssSize(props.width) }),
    }), [props.size, props.width]);

    const handleClick = useCallback(() => {
        dispatch(createSendActionNameAction(id, module, onAction));
    }, [id, onAction, dispatch, module]);

    useEffect(() => {
        setValue((val) => {
            if (props.label === undefined && defaultLabel) {
                try {
                    return JSON.parse(defaultLabel) as Icon;
                } catch {
                    return defaultLabel;
                }
            }
            if (props.label !== undefined) {
                return props.label;
            }
            return val;
        });
    }, [props.label, defaultLabel]);

    return (
        <Tooltip title={hover || ""}>
            <MuiButton
                id={id}

Review comment (suggestion):
I would propose to use the utils/expandSx function that allows to not create an object if it is not necessary
`const buttonSx = useMemo(() => expandSx(undefined, props.width ? { width: getCssSize(props.width) } : undefined, size !== "medium" ? {minHeight: "unset"}: undefined), [props.width]);`

Code after:
import { getComponentClassName } from "./TaipyStyle";

interface ButtonProps extends TaipyActiveProps {
    onAction?: string;
    label: string;
    defaultLabel?: string;
    width?: string | number;
    size?: "small" | "medium" | "large";
    variant?: "text" | "outlined" | "contained";
}

const cardSx = { p: 0 };

const Button = (props: ButtonProps) => {
    const { id, onAction = "", defaultLabel, size = "medium", variant = "outlined" } = props;
    const [value, setValue] = useState<stringIcon>("");
    const dispatch = useDispatch();
    const module = useModule();

    const className = useClassNames(props.libClassName, props.dynamicClassName, props.className);
    const active = useDynamicProperty(props.active, props.defaultActive, true);
    const hover = useDynamicProperty(props.hoverText, props.defaultHoverText, undefined);
    const buttonSx = useMemo(() => (props.width ? { width: getCssSize(props.width) } : undefined), [props.width]);

    const handleClick = useCallback(() => {
        dispatch(createSendActionNameAction(id, module, onAction));
    }, [id, onAction, dispatch, module]);

    useEffect(() => {
        setValue((val) => {
            if (props.label === undefined && defaultLabel) {
                try {
                    return JSON.parse(defaultLabel) as Icon;
                } catch {
                    return defaultLabel;
                }
            }
            if (props.label !== undefined) {
                return props.label;
            }
            return val;
        });
    }, [props.label, defaultLabel]);

    return (
        <Tooltip title={hover || ""}>
            <MuiButton
                id={id}
                variant={variant}
                size={size}
                className={`${className} ${getComponentClassName(props.children)}`}