Customizing SplitButton

Variables

The following table lists the available variables for customization.

NameTypeDefault valueComputed value
$kendo-split-button-focus-shadowList$kendo-button-focus-shadow0 0 0 2px color-mix(in srgb, var(--kendo-color-on-app-surface, #3d3d3d) 8%, transparent)
Description
The focus shadow of the SplitButton.
$kendo-split-button-arrow-padding-xString$kendo-button-padding-yvar(--kendo-spacing-1, 0.25rem)
Description
The horizontal padding of the arrow Button.
$kendo-split-button-sm-arrow-padding-xString$kendo-button-sm-padding-yvar(--kendo-spacing-0\.5, 0.125rem)
Description
The horizontal padding of the small arrow Button.
$kendo-split-button-md-arrow-padding-xString$kendo-button-md-padding-yvar(--kendo-spacing-1, 0.25rem)
Description
The horizontal padding of the medium arrow Button.
$kendo-split-button-lg-arrow-padding-xString$kendo-button-lg-padding-yvar(--kendo-spacing-2, 0.5rem)
Description
The horizontal padding of the large arrow Button.
$kendo-split-button-arrow-padding-yString$kendo-button-padding-yvar(--kendo-spacing-1, 0.25rem)
Description
The vertical padding of the arrow Button.
$kendo-split-button-sm-arrow-padding-yString$kendo-button-sm-padding-yvar(--kendo-spacing-0\.5, 0.125rem)
Description
The vertical padding of the small arrow Button.
$kendo-split-button-md-arrow-padding-yString$kendo-button-md-padding-yvar(--kendo-spacing-1, 0.25rem)
Description
The vertical padding of the medium arrow Button.
$kendo-split-button-lg-arrow-padding-yString$kendo-button-lg-padding-yvar(--kendo-spacing-2, 0.5rem)
Description
The vertical padding of the large arrow Button.

In this article

Not finding the help you need?