Switch
The switch component is a UI control used to toggle between two distinct states, commonly representing an on/off or enabled/disabled setting.
Expand code
<Switch/>
<Switch disabled/>
<Switch defaultChecked/>
<Switch defaultChecked disabled/>Size
The switch component comes in three different sizes: small, medium and large.
Expand code
<Switch size={'small'}/>
<Switch size={'medium'}/>
<Switch size={'large'}/>Color
Each button variant offers predefined color options, along with the ability to set a custom color.
Expand code
<Switch defaultChecked color={'info'}/>
<Switch defaultChecked color={'success'}/>
<Switch defaultChecked color={'warning'}/>
<Switch defaultChecked color={'error'}/>
<Switch defaultChecked color={'mediumpurple'}/>
<Switch defaultChecked color={'#0f7488'}/>Props
| Name | Type | Default | Description |
|---|---|---|---|
| color | string | - | Color of the button |
| dark | boolean | false | Use the darkmode style |
| size | small | medium | large | medium | size of the component |
In addition to these props the component uses the default html input props (e.g. checked).
Last updated on