Appearance
The Switch provides a predefined set of appearance options.
Apart from the default vision of the Switch, these alternative styling options enable you to configure each individual aspect of the component's appearance.
The current article provides details about how the component changes when the different configurations of its properties are applied. Here are the sections you can directly access:
Configurator demo
The following example demonstrates configuring different aspects of a Switch appearance through a configurator.
Size
The size of the Switch is controlled through its size property. The values we can pass to the property are as follows:
small— Sets thepaddingto2pxand8px.medium— Sets thepaddingto4pxand8px.large— Sets thepaddingto6pxand8px.
The following example demonstrates the usage of each size option:
Track roundness
The track roundness of the Switch is controlled through its trackRounded property. The values we can pass to the property are as follows:
none— Sets noborder radius.small— Sets theborder radiusto1px.medium— Sets theborder radiusto2px.
large— Sets theborder radiusto4px.
full— Sets theborder radiusto9999px.
The following example demonstrates the usage of each trackRounded option:
Thumb roundness
The thumb roundness of the Switch is controlled through its thumbRounded property. The values we can pass to the property are as follows:
none— Sets noborder radius.small— Sets theborder radiusto1px.medium— Sets theborder radiusto2px.
large— Sets theborder radiusto4px.
full— Sets theborder radiusto9999px.
The following example demonstrates the usage of each thumbRounded option: