Group Buttons Properties in Material-UI with React

Material-UI with React

Create a React project

npx create-react-app material-ui-react

Move to the folder project

cd material-ui-react

Import Material-UI with npm or yarn (Just one of course!)

npm install @material-ui/core

or

yarn add @material-ui/core

Start the Application

npm start

or

yarn star

Open the folder project in your favourite Text Editor

Delete the code between the header tag

• Delete the all the code between the header tag in src/App.js

Add a Button

• Go to src/App.js file
• Add the following line under the imports import Button from '@material-ui/core/Button'
• Add all the Contained Buttons that the current Material-UI documentation give us between the header tag

<Button variant="contained">Default</Button>
<Button variant="contained" color="primary">
  Primary
</Button>
<Button variant="contained" color="secondary">
  Secondary
</Button>
<Button variant="contained" disabled>
  Disabled
</Button>
<Button variant="contained" color="primary" href="#contained-buttons">
  Link
</Button>

*You can see the look of the buttons in the following link. You will also find other types of buttons that you can use in your project *
Link

Add a Button Group

In the Buttons code we entered before, we only worked with contained variant. There is a better way instead of repeting the variant="contained" part in our code. To avoid all this repeated code we are going to use Button Group

• Import the ButtonGroup functionality import ButtonGroup from '@material-ui/core/ButtonGroup';
• Replace the code before to this new one:

<ButtonGroup
          variant="contained">
<Button>Default</Button>
<Button color="primary">
  Primary
</Button>
<Button color="secondary">
  Secondary
</Button>
<Button disabled>
  Disabled
</Button>
<Button color="primary" href="#contained-buttons">
  Link
</Button>
</ButtonGroup>