Material-UI Buttons

Hello Fellow Developers in one of my first Material UI  Blogs we have discussed about buttons but now lets take a brief overview of how to use Material UI’s Buttons and discuss about wide variety of properties buttons comes with.

After installing Material UI in your react app write following code to import a button currently i am importing a button in my app.js file:-

import *  from 'react';
import Stack from '@mui/material/Stack';
import Button from '@mui/material/Button';

export default function App() {
  return (
    <Stack direction="row">
      <Button variant="text">Text</Button>
      <Button variant="contained">Contained</Button>
      <Button variant="outlined">Outlined</Button>
    </Stack>
  );
}

Now if you use given code in your app we can see 3 variety of buttons text, contained and outlined these are the default varieties comes with Material UI

Now some more properties to convert a button into a disabled button or a normal link.

import *  from 'react';
import Button from '@mui/material/Button';
import Stack from '@mui/material/Stack';

export default function App() {
  return (
    <Stack direction="row" >
      <Button>Primary</Button>
      <Button disabled>Disabled</Button>
      <Button href="#text-buttons">Link</Button>
    </Stack>
  );

We can also merge the properties of above 2 codes : –

import * from 'react';
import Button from '@mui/material/Button';
import Stack from '@mui/material/Stack';

export default function App() {
  return (
    <Stack direction="row">
      <Button variant="contained">Contained</Button>
      <Button variant="contained" disabled>
        Disabled
      </Button>
      <Button variant="contained" href="#contained-buttons">
        Link
      </Button>
    </Stack>
  );
}

Some of the Material UI’s color properties for buttons:-

import *  from 'react';
import Stack from '@mui/material/Stack';
import Button from '@mui/material/Button';

export default function App() {
  return (
    <Stack direction="row" spacing={2}>
      <Button color="secondary">Secondary</Button>
      <Button variant="contained" color="success">
        Success
      </Button>
      <Button variant="outlined" color="error">
        Error
      </Button>
    </Stack>
  );
}

Different sizes of buttons :-

import * from 'react';
import Box from '@mui/material/Box';
import Button from '@mui/material/Button';

export default function App() {
  return (
    <Box sx={{ '& button': { m: 1 } }}>
      <div>
        <Button size="small">Small</Button>
        <Button size="medium">Medium</Button>
        <Button size="large">Large</Button>
      </div>
      <div>
        <Button variant="outlined" size="small">
          Small
        </Button>
        <Button variant="outlined" size="medium">
          Medium
        </Button>
        <Button variant="outlined" size="large">
          Large
        </Button>
      </div>
      <div>
        <Button variant="contained" size="small">
          Small
        </Button>
        <Button variant="contained" size="medium">
          Medium
        </Button>
        <Button variant="contained" size="large">
          Large
        </Button>
      </div>
    </Box>
  );
}

Material UI’s Buttons properties just don’t complete  here it goes on and on we can do lots and lots of this with these buttons  so for more properties please refer : –https://mui.com/material-ui/react-button/

That’s it for this Blog of Material UI see you guys in next one