Customizing Switch

Variables

The following table lists the available variables for customization.

Name	Type	Default value	Computed value
$kendo-switch-font-family	Null	`null`	`null`
Description Font family of the switch.
$kendo-switch-track-border-width	Number	`1px`	`1px`
Description Border width of the switch track.
$kendo-switch-thumb-border-width	Number	`0`	`0`
Description Border width of the switch thumb.
$kendo-switch-label-text-transform	String	`uppercase`	`uppercase`
Description Text transform of the switch label.
$kendo-switch-label-display	String	`none`	`none`
Description Display of the switch label.
$kendo-switch-sizes	Map	`( sm: ( font-size: $kendo-font-size-sm, track-width: 36px, track-height: 16px, thumb-width: 10px, thumb-height: 10px, thumb-offset: 3px, label-offset: 4px ), md: ( font-size: $kendo-font-size-sm, track-width: 40px, track-height: 20px, thumb-width: 12px, thumb-height: 12px, thumb-offset: 4px, label-offset: 5px ), lg: ( font-size: $kendo-font-size-sm, track-width: 44px, track-height: 24px, thumb-width: 14px, thumb-height: 14px, thumb-offset: 5px, label-offset: 6px ) )`	`(sm: (font-size: 0.875rem, track-width: 36px, track-height: 16px, thumb-width: 10px, thumb-height: 10px, thumb-offset: 3px, label-offset: 4px), md: (font-size: 0.875rem, track-width: 40px, track-height: 20px, thumb-width: 12px, thumb-height: 12px, thumb-offset: 4px, label-offset: 5px), lg: (font-size: 0.875rem, track-width: 44px, track-height: 24px, thumb-width: 14px, thumb-height: 14px, thumb-offset: 5px, label-offset: 6px))`
Description Map with the different switch sizes.