Day 26 of 50 Days of React: Button and Button Group Component of MUI in React.

Hi, Dev’s👋🏻, Let’s see How to use the Button and Button Group Component of MUI in React?

Button😊

Buttons allow users to take action, and make choices, with a single tap.

Buttons communicate actions that users can take. They are typically placed throughout your UI, in places like:

• Modal windows
• Forms
• Cards
• Toolbars

import * as React from 'react';
import Stack from '@mui/material/Stack';
import Button from '@mui/material/Button';
export default function BasicButtons() {
  return (
    <Stack spacing={2} direction="row">
      <Button variant="text">Text</Button>
      <Button variant="contained">Contained</Button>
      <Button variant="outlined">Outlined</Button>
    </Stack>
  );
}

For more Customization:

React Button component - Material UI

Button group📝

The ButtonGroup component can be used to group related buttons.

The buttons can be grouped by wrapping them with the ButtonGroup component. They need to be immediate children.

import * as React from 'react';
import Button from '@mui/material/Button';
import ButtonGroup from '@mui/material/ButtonGroup';
export default function BasicButtonGroup() {
  return (
    <ButtonGroup variant="contained" aria-label="outlined primary button group">
      <Button>One</Button>
      <Button>Two</Button>
      <Button>Three</Button>
    </ButtonGroup>
  );
}

For more Customization:

React ButtonGroup component - Material UI

In the Next Article, I will be writing about How to use the Checkbox and Radion Button of MUI in React🤔?

That’s all for Today, Stay Tuned and I will see you in the next one👋🏻.

Link to Day 27

Thanks for Following and Claps😋