Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to change button group appearance in Material UI?
In this article, we will explore how to customize the appearance of a button group, in Material UI so that it suits the needs of your application. Material UI, also known as MUI is a frontend library developed by Google. It provides a collection of to use React components that can be used in frameworks, like React and NextJS. With Material UI you get access to a range of components such as buttons, checkboxes, selects and more. One specific component called ButtonGroup is particularly useful for grouping buttons
Button groups are great for enhancing the user experience by organizing buttons. You can. Create your component to group buttons or use the built in ButtonGroup component provided by Material UI.
Steps to Customize the ButtonGroup Appearance
Step 1: Create a New React App and Install MUI
To begin creating and customizing the button group, we first must have an react app with material ui installed. Let’s create a new React app and install mui by running the following command −
npx create-react-app customproject cd customproject npm install @mui/material @emotion/react @emotion/styled
Step 2: Define a React component
Now, when the new react app is created, in the src folder there is a main App.js file. Open it, and add the below code −
import React from "react";
export default function App() {
return (
…
)
}
Step 3: Import the Button Group Component
Once, we have defined the new component, its time to import the button group component. Below is the syntax on how to import button group −
import ButtonGroup from '@mui/material/ButtonGroup';
Step 4: Use ButtonGroup Component
<ButtonGroup variant="contained"> <Button>button 1</Button> <Button>button 2</Button> … </ButtonGroup>
So, far now we have learned the step-by-step process for changing the appearance of button group. Now let’s see some examples for customizing different button groups including their variants, sizes, colors, etc.
Props
variant − This prop is used to change the button group variant, which consists of three different variants, i.e., text, outline, and contained.
size − This prop is used to change the button group size. The sizes it supports are small, medium, and large whereas medium is the default one.
orientation − This prop is used to change the orientation of the button group. It can be either vertical or horizontal. The default is set to horizontal.
color − This prop is used to change the appearance or color of the button group. It supports both default and custom theme colors. The colors it includes are primary, success, info, error, warning, inherit, secondary, and the default color is set to primary.
Example
In this example, we see how to change the button group variant to contained.
import React from "react";
import Button from '@mui/material/Button';
import ButtonGroup from '@mui/material/ButtonGroup';
function App() {
return (
<div
style={{
display: "flex",
marginTop: 30,
flexDirection: "column",
alignItems: "center",
justifyContent: "center",
gap: 10
}}>
<ButtonGroup variant="contained" aria-label="button group contained">
<Button>Like</Button>
<Button>Share</Button>
<Button>Subscribe</Button>
<Button>Comment</Button>
</ButtonGroup>
</div>
);
}
export default App;
Output
Example
The below example demonstrates the change of the button group variant to outline.
import React from "react";
import Button from '@mui/material/Button';
import ButtonGroup from '@mui/material/ButtonGroup';
export default function App() {
return (
<div
style={{
display: "flex",
marginTop: 30,
flexDirection: "column",
alignItems: "center",
justifyContent: "center",
gap: 10
}}>
<ButtonGroup variant="outlined" aria-label="button group contained">
<Button>Like</Button>
<Button>Share</Button>
<Button>Subscribe</Button>
<Button>Comment</Button>
</ButtonGroup>
</div>
);
}
Output
Example
The below example demonstrates the change of the button group variant to text.
import React from "react";
import Button from '@mui/material/Button';
import ButtonGroup from '@mui/material/ButtonGroup';
export default function App() {
return (
<div
style={{
display: "flex",
marginTop: 30,
flexDirection: "column",
alignItems: "center",
justifyContent: "center",
gap: 10
}}>
<ButtonGroup variant="text" aria-label="button group contained">
<Button>Like</Button>
<Button>Share</Button>
<Button>Subscribe</Button>
<Button>Comment</Button>
</ButtonGroup>
</div>
);
}
Output
Example
The below example demonstrates the changing sizes of the button group.
import React from "react";
import Button from '@mui/material/Button';
import ButtonGroup from '@mui/material/ButtonGroup';
export default function App() {
return (
<div
style={{
display: "flex",
marginTop: 30,
flexDirection: "column",
alignItems: "center",
justifyContent: "center",
gap: 10
}}>
<ButtonGroup size="small" variant="outlined" aria-label="button group contained">
<Button>Like</Button>
<Button>Share</Button>
<Button>Subscribe</Button>
</ButtonGroup>
<ButtonGroup size="medium" variant="outlined" aria-label="button group contained">
<Button>Like</Button>
<Button>Share</Button>
<Button>Subscribe</Button>
</ButtonGroup>
<ButtonGroup size="large" variant="outlined" aria-label="button group contained">
<Button>Like</Button>
<Button>Share</Button>
<Button>Subscribe</Button>
</ButtonGroup>
</div>
);
}
Output
Example
The below example demonstrates the changing colors of the button group.
import React from "react";
import Button from '@mui/material/Button';
import ButtonGroup from '@mui/material/ButtonGroup';
export default function App() {
return (
<div
style={{
display: "flex",
marginTop: 30,
flexDirection: "column",
alignItems: "center",
justifyContent: "center",
gap: 10
}}>
<ButtonGroup size="small" variant="text" color="error" aria-label="button group contained">
<Button>Like</Button>
<Button>Share</Button>
<Button>Subscribe</Button>
</ButtonGroup>
<ButtonGroup size="medium" variant="outlined" color="success" aria-label="button group contained">
<Button>Like</Button>
<Button>Share</Button>
<Button>Subscribe</Button>
</ButtonGroup>
<ButtonGroup size="large" variant="contained" color="info" aria-label="button group contained">
<Button>Like</Button>
<Button>Share</Button>
<Button>Subscribe</Button>
</ButtonGroup>
</div>
);
}
Output
Example
The below example demonstrates the changing of the orientation of the button group.
import React from "react";
import Button from '@mui/material/Button';
import ButtonGroup from '@mui/material/ButtonGroup';
export default function App() {
return (
<div
style={{
display: "flex",
marginTop: 30,
flexDirection: "column",
alignItems: "center",
justifyContent: "center",
gap: 10
}}>
<ButtonGroup size="medium" orientation="vertical" variant="contained" color="error" aria-label="button group contained">
<Button>Like</Button>
<Button>Share</Button>
<Button>Subscribe</Button>
</ButtonGroup>
<ButtonGroup size="medium" variant="outlined" color="success" aria-label="button group contained">
<Button>Like</Button>
<Button>Share</Button>
<Button>Subscribe</Button>
</ButtonGroup>
</div>
);
}
Output
Conclusion
In this article, we learned how to customize and change the button group's appearance. We have looked at the props used in changing the appearance of the button group, and apart from this, we also saw different examples, including changing the styles of buttons using props like variant, color, size, and others.
To organize the different buttons into one group, the component is the best as compared to other methods like using flex, grid, etc. With the help of the button group component, the design and the user experience are also implemented.
56 Views
