BUTTON (MUI) all Function Props in React Js

 BUTTON (MUI) all Function Props in React Js

// Direct Use Button

<Box sx={{display: 'flex', }}>

     <Button variant='outlined' sx={{marginRight: '10px' , backgroundColor :'red' ,

           color: 'white'}} fullWidth>View Number</Button>

     <Button variant='contained' fullWidth >Contact</Button>

</Box>

// Using Button (proprs)

<Box sx={{display: 'flex', }}>

     <Outlinedbutton name={"VIEW NUMBER"}  fulwidth={true} />

     <Box sx={{width: '20px'}}></Box>

     <Simplebutton fulwidth={true} name={'CONTACT'} variant={'contained'}

        whitetext={true} bgprimary={true}/>

</Box>

//Code Here

import React from 'react';

import { Button, Typography } from "@mui/material";

import { MYCOLOR } from '../utils/Mycolor';

const Simplebutton = ({ name, variant, bgprimary, whitetext ,fulwidth }) => {

    return (

        <>

            <Button variant='outlined'

                sx={{

                    backgroundColor: bgprimary ?  MYCOLOR.primary : 'pink'  ,

                    color : whitetext ? MYCOLOR.whitetext : MYCOLOR.blacktext,

                    width: fulwidth ? '100%' : 'auto',

                }}>

                {name}

            </Button>

        </>

    );

}

const Outlinedbutton = ({ name,fulwidth}) => {

    return (

        <>

            <Button variant='outlined'

                sx={{

                    // backgroundColor: bgprimary ?  MYCOLOR.primary : 'pink'  ,

                    borderColor: MYCOLOR.primary,

                    color : MYCOLOR.blacktext,

                    width: fulwidth ? '100%' : 'auto',

                }}>

                {name}

            </Button>

        </>

    );

}

export {Simplebutton , Outlinedbutton };