toggle-button

Import

import ToggleButton from '@mui/material/ToggleButton';
// or
import { ToggleButton } from '@mui/material';

Learn about the difference by reading this guide on minimizing bundle size.

Props of the ButtonBase component are also available.

Name	Type	Default	Description
value*	any	-	The value to associate with the button when selected in a ToggleButtonGroup.
children	node	-	The content of the component.
classes	object	-	Override or extend the styles applied to the component. See CSS classes API below for more details.
color	‘standard’ | ‘primary’ | ‘secondary’ | ‘error’ | ‘info’ | ‘success’ | ‘warning’ | string	‘standard’	The color of the button when it is in an active state.
disabled	bool	false	If true, the component is disabled.
disableFocusRipple	bool	false	If true, the keyboard focus ripple is disabled.
disableRipple	bool	false	If true, the ripple effect is disabled.
fullWidth	bool	false	If true, the button will take up the full width of its container.
onChange	func	-	Callback fired when the state changes.
onClick	func	-	Callback fired when the button is clicked.
selected	bool	-	If true, the button is rendered in an active state.
size	‘small’ | ‘medium’ | ‘large’ | string	‘medium’	The size of the component.
sx	Array<func | object | bool> | func | object	-	The system prop that allows defining system overrides as well as additional CSS styles.

Inheritance

While not explicitly documented above, the props of the ButtonBase component are also available in ToggleButton.

Theme Default Props

You can use MuiToggleButton to change the default props of this component with the theme.

CSS Classes

Class name	Rule name	Description
.Mui-disabled	-	State class applied to the root element if disabled={true}.
.Mui-selected	-	State class applied to the root element if selected={true}.
.MuiToggleButton-fullWidth	fullWidth	Styles applied to the root element if fullWidth={true}.
.MuiToggleButton-primary	primary	State class applied to the root element if color="primary".
.MuiToggleButton-root	root	Styles applied to the root element.
.MuiToggleButton-secondary	secondary	State class applied to the root element if color="secondary".
.MuiToggleButton-sizeLarge	sizeLarge	Styles applied to the root element if size="large".
.MuiToggleButton-sizeMedium	sizeMedium	Styles applied to the root element if size="medium".
.MuiToggleButton-sizeSmall	sizeSmall	Styles applied to the root element if size="small".
.MuiToggleButton-standard	standard	State class applied to the root element if color="standard".

Customization

You can override the style of the component using:

• A global class name
• A rule name as part of the component’s styleOverrides property in a custom theme

Source Code

If you did not find the information in this page, consider having a look at the implementation of the component for more detail.