New to Kendo UI for Vue? Start a free 30-day trial

Customizing Dialog

Variables

The following table lists the available variables for customization.

NameTypeDefault valueComputed value
$kendo-dialog-titlebar-bgNullnullnull
Description
The background color of the Dialog titlebar.
$kendo-dialog-titlebar-textNullnullnull
Description
The text color of the Dialog titlebar.
$kendo-dialog-titlebar-borderNullnullnull
Description
The border color of the Dialog titlebar.
$kendo-dialog-buttongroup-padding-xString$kendo-actions-padding-xvar(--kendo-spacing-2, 0.5rem)
Description
The horizontal padding of the Dialog action buttons.
$kendo-dialog-buttongroup-padding-yString$kendo-actions-padding-yvar(--kendo-spacing-2, 0.5rem)
Description
The vertical padding of the Dialog action buttons.
$kendo-dialog-buttongroup-border-widthNumber1px1px
Description
The width of the top border of the Dialog action buttons.
$kendo-dialog-button-spacingString$kendo-actions-button-spacingvar(--kendo-spacing-2, 0.5rem)
Description
The spacing between the Dialog action buttons.
$kendo-dialog-theme-colorsMap( "primary": k-map-get($kendo-theme-colors, "primary"), "light": k-map-get($kendo-theme-colors, "light"), "dark": k-map-get($kendo-theme-colors, "dark") )("primary": var(--kendo-color-primary, #3f51b5), "light": var(--kendo-color-light, #f5f5f5), "dark": var(--kendo-color-dark, #424242))
Description
The theme colors map for the Dialog.

In this article

Not finding the help you need?