DEV Community

loading...

Group Buttons Properties in Material-UI with React

sezalazar profile image sezalazar ・2 min read

Material-UI with React

Create a React project

npx create-react-app material-ui-react
Enter fullscreen mode Exit fullscreen mode

Move to the folder project

cd material-ui-react
Enter fullscreen mode Exit fullscreen mode

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

npm install @material-ui/core
Enter fullscreen mode Exit fullscreen mode

or

yarn add @material-ui/core
Enter fullscreen mode Exit fullscreen mode

Start the Application

npm start
Enter fullscreen mode Exit fullscreen mode

or

yarn star
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

*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>
Enter fullscreen mode Exit fullscreen mode

Discussion

pic
Editor guide