Skip to main content

Toggle Button

A Toggle Button is a component that acts as a single input control and is part of a set within a Toggle Button Group. It is possible to select multiple toggle buttons unless the exclusive property is enabled for the Toggle Button Group.

The toggle button has two states, On and Off.

Properties

NameTypeDefaultDescription
textstringSpecifies the text value for the toggle button face.
labelnodeSpecifies a label for the component.
valueanySpecifies the value of the component.
typebutton
submit
reset
buttonSpecifies the type of the component.
classesobjectOverrides or extends the classes applied to the component.
disabledboolfalseIf true, the toggle button is disabled.
hrefstringA URL to link to when the component is clicked.

Style Attributes

NameTypeDefaultDescription
colorstandard
primary
secondary
error
info
success
warning
string
standardDefines the color of the component.
sizesmall
medium
large
string
mediumDefines the size of the component.
fullWidthboolfalseIf true, the toggle button takes up the full width of its container.
sxarray
Specifies custom CSS styles for the toggle button.
disableElevationboolfalseIf true, the toggle button will sit flat on the background surface.
disableFocusRippleboolfalseIf true, the keyboard focus ripple is disabled.
disableRippleboolfalseIf true, the ripple effect is disabled.

Subcomponents

The Toggle Button component has a subcomponent that allows the placement of an icon on the left or right side of the button face.

Icon

Left Icon - specifies an icon to use on the left side of the button face.

Right Icon - specifies an icon to use on the right side of the button face.

For further details, see the Icon component.

Properties

NameTypeDefaultDescription
colorinherit
primary
secondary
action
disabled
error
string
inheritDefines the color of the icon.
sizeinherit
small
medium
large
string
smallDefines the size of the icon.
viewBox0 0 24 24Defines the size of the view box that displays the icon.
fillhex #ffffff
rgb 5,5,5
The fill color of the icon.
strokehex #ffffff
rgb 5,5,5
The stroke color of the icon.

For more detail on the Toggle Button component, see the MUI developer docs.

on this page
Was this article useful?
89% of our users said this content was useful.