import type { ButtonBaseProps } from "@material-ui/core/ButtonBase" ; import ButtonBase from "@material-ui/core/ButtonBase" ; import clsx from "clsx" ; import React from "react" ; import { UserInteraction } from "../../types/utils" ; import useStyles from "./styles" ; export type LayoutButtonProps < T extends React . ElementType = "button" > = ButtonBaseProps < T > & { state ? : UserInteraction ; } ; export const LayoutButton = React . forwardRef ( ( { className , children , state = "default" , ... rest } , ref ) => { const classes = useStyles ( ) ; return ( < ButtonBase className = { clsx ( classes . root , className , { [ classes . hover ] : state === "hover" , [ classes . active ] : state === "active" } ) } disableRipple ref = { ref } { ... rest } > { children } < /ButtonBase>); } ) ; LayoutButton . displayName = "LayoutButton" ;