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 };
