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
| Name | Type | Default | Description |
|---|---|---|---|
| text | string | Specifies the text value for the toggle button face. | |
| label | node | Specifies a label for the component. | |
| value | any | Specifies the value of the component. | |
| type | button submit reset | button | Specifies the type of the component. |
| classes | object | Overrides or extends the classes applied to the component. | |
| disabled | bool | false | If true, the toggle button is disabled. |
| href | string | A URL to link to when the component is clicked. |
Style Attributes
| Name | Type | Default | Description |
|---|---|---|---|
| color | standard primary secondary error info success warning string | standard | Defines the color of the component. |
| size | small medium large string | medium | Defines the size of the component. |
| fullWidth | bool | false | If true, the toggle button takes up the full width of its container. |
| sx | array | Specifies custom CSS styles for the toggle button. | |
| disableElevation | bool | false | If true, the toggle button will sit flat on the background surface. |
| disableFocusRipple | bool | false | If true, the keyboard focus ripple is disabled. |
| disableRipple | bool | false | If 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
| Name | Type | Default | Description |
|---|---|---|---|
| color | inherit primary secondary action disabled error string | inherit | Defines the color of the icon. |
| size | inherit small medium large string | small | Defines the size of the icon. |
| viewBox | 0 0 24 24 | Defines the size of the view box that displays the icon. | |
| fill | hex #ffffff rgb 5,5,5 | The fill color of the icon. | |
| stroke | hex #ffffff rgb 5,5,5 | The stroke color of the icon. |
For more detail on the Toggle Button component, see the MUI developer docs.