Close full mode

Reactjs Material-UI ButtonGroup component

Button group component in Material-UI React:

For grouping multiple buttons, we can write our own component. But, Material-UI provides a different component called ButtonGroup to make it easy for us. We can use this component to group related buttons.

In this post, we will learn how to use ButtonGroup component with examples.

YouTube Video:

ButtonGroup component:

ButtonGroup component is used to group similar buttons. It can be imported as like below:

import ButtonGroup from '@material-ui/core/ButtonGroup';
// or
import { ButtonGroup } from '@material-ui/core';

Props of ButtonGroup:

Following are its supported props:

childrenContents to show
classesOverride or extend the styling
componentString or HTML component to use as the root component. By default it is div
disableElevationBy default it is false. It will disable the elevation if we mark it as true
disabledUse true to disable this group
disableFocusRippleEnable/disable button keyboard focus ripple. true or false(default).
disableRippleEnable/disable button ripple. false by default.
colorColor of the component. It can be default, inherit, primary or secondary.
orientationOrientation of the button group. It can be vertical or horizontal(default).
sizeIt can be large, medium or small. By default, it is medium.
variantIt can be contained, outlined or text. By default, it is outlined

Example usage:

Create one Reactjs project with Material-UI integrated. Update your App.js file as below:

import { ButtonGroup,Button } from "@material-ui/core";
import "./App.css";
function App() {
return (
<div className="App">
<ButtonGroup color='primary' variant='outlined'>
<ButtonGroup style={{marginLeft: '30px'}} color='secondary' variant='contained' orientation='vertical'>
export default App;

We are creating two ButtonGroup components here. Both have different colors, variant, and orientation.

It will given the below output:

button group example
button group example

Official doc:


Subscribe to our Newsletter

Reactjs Material-UI Hidden component
Reactjs Material-UI Checkbox component