Customizing Split-button

Variables

The following table lists the available variables for customization.

NameTypeDefault valueComputed value
$kendo-split-button-sm-arrow-padding-y$kendo-button-sm-padding-y
Description
The vertical padding of the small arrow Button.
$kendo-split-button-md-arrow-padding-y$kendo-button-md-padding-y
Description
The vertical padding of the medium arrow Button.
$kendo-split-button-lg-arrow-padding-y$kendo-button-lg-padding-y
Description
The vertical padding of the large arrow Button.
$kendo-split-button-sm-arrow-padding-x$kendo-split-button-sm-arrow-padding-y
Description
The horizontal padding of the small arrow Button.
$kendo-split-button-md-arrow-padding-x$kendo-split-button-md-arrow-padding-y
Description
The horizontal padding of the medium arrow Button.
$kendo-split-button-lg-arrow-padding-x$kendo-split-button-lg-arrow-padding-y
Description
The horizontal padding of the large arrow Button.
$kendo-split-button-arrow-delimiter-sizecalc( #{$kendo-button-inner-calc-size} / 2 )
Description
The height of the SplitButton arrow delimiter.
$kendo-split-button-arrow-delimiter-line-size1px
Description
The width of the SplitButton arrow delimiter.
$kendo-split-button-arrow-delimiter-bgif($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 28%, transparent), k-get-theme-color-var( neutral-60 ))
Description
The background color of the SplitButton arrow delimiter.
$kendo-split-button-sizes( sm: $kendo-split-button-sm-arrow-padding-y, md: $kendo-split-button-md-arrow-padding-y, lg: $kendo-split-button-lg-arrow-padding-y )
Description
The sizes map for the SplitButton.

In this article

Not finding the help you need?