New to Kendo UI for AngularStart a free 30-day trial

Customizing Dialog

Variables

The following table lists the available variables for customization.

NameTypeDefault valueComputed value
$kendo-dialog-titlebar-bgString$kendo-component-header-bgvar(--kendo-color-surface, #fafafa)
Description
The background color of the Dialog titlebar.
$kendo-dialog-titlebar-textString$kendo-component-header-textvar(--kendo-color-on-app-surface, #3d3d3d)
Description
The text color of the Dialog titlebar.
$kendo-dialog-titlebar-borderStringinheritinherit
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, #ff6358)
  • light: var(--kendo-color-light, #ebebeb)
  • dark: var(--kendo-color-dark, #3d3d3d)
Description
The theme colors map for the Dialog.
In this article
VariablesSuggested Links
Not finding the help you need?
Contact Support