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

Customizing Prompt

Variables

The following table lists the available variables for customization.

NameTypeDefault valueComputed value
$kendo-prompt-textString$kendo-component-textvar(--kendo-color-on-app-surface, #212121)
Description
The text color of the Prompt.
$kendo-prompt-bgString$kendo-component-bgvar(--kendo-color-surface-alt, #ffffff)
Description
The background color of the Prompt.
$kendo-prompt-borderString$kendo-component-bordervar(--kendo-color-border, rgba(0, 0, 0, 0.12))
Description
The border color of the Prompt.
$kendo-prompt-header-textString$kendo-component-header-textvar(--kendo-color-on-app-surface, #212121)
Description
The text color of the Prompt header.
$kendo-prompt-header-bgString$kendo-component-bgvar(--kendo-color-surface-alt, #ffffff)
Description
The background color of the Prompt header.
$kendo-prompt-header-borderString$kendo-component-header-bordervar(--kendo-color-border, rgba(0, 0, 0, 0.12))
Description
The border color of the Prompt header.
$kendo-prompt-content-padding-yStringk-spacing(4)var(--kendo-spacing-4, 1rem)
Description
The vertical padding of the Prompt content.
$kendo-prompt-content-padding-xStringk-spacing(4)var(--kendo-spacing-4, 1rem)
Description
The horizontal padding of the Prompt content.
$kendo-prompt-content-spacingStringk-spacing(4)var(--kendo-spacing-4, 1rem)
Description
The spacing between the items of the Prompt content.
$kendo-prompt-content-textString$kendo-component-header-textvar(--kendo-color-on-app-surface, #212121)
Description
The text color of the Prompt content.
$kendo-prompt-content-bgString$kendo-component-header-bgvar(--kendo-color-app-surface, #ffffff)
Description
The background color of the Prompt content.
$kendo-prompt-content-borderString$kendo-component-header-bordervar(--kendo-color-border, rgba(0, 0, 0, 0.12))
Description
The text border of the Prompt content.
$kendo-prompt-expander-spacingStringk-spacing(2)var(--kendo-spacing-2, 0.5rem)
Description
The spacing between the items of the Prompt content expander.
$kendo-prompt-suggestion-padding-yStringk-spacing(2)var(--kendo-spacing-2, 0.5rem)
Description
The vertical padding of the Prompt suggestion container.
$kendo-prompt-suggestion-padding-xStringk-spacing(2)var(--kendo-spacing-2, 0.5rem)
Description
The horizontal padding of the Prompt suggestion container.
$kendo-prompt-suggestion-border-radiusStringk-border-radius(md)var(--kendo-border-radius-md, 0.25rem)
Description
The border radius of the Prompt suggestion container.
$kendo-prompt-suggestion-textString$kendo-component-textvar(--kendo-color-on-app-surface, #212121)
Description
The text color of the Prompt suggestion container.
$kendo-prompt-suggestion-bgString$kendo-body-bgvar(--kendo-color-app-surface, #ffffff)
Description
The background color of the Prompt suggestion container.
$kendo-prompt-suggestion-borderString$kendo-component-bordervar(--kendo-color-border, rgba(0, 0, 0, 0.12))
Description
The border color of the Prompt suggestion container.
$kendo-prompt-suggestion-shadowStringk-elevation(1)var(--kendo-elevation-1, 0px 1px 3px 0px rgba(0, 0, 0, 0.2), 0px 2px 1px 0px rgba(0, 0, 0, 0.12), 0px 1px 1px 0px rgba(0, 0, 0, 0.14))
Description
The elevation of the Prompt suggestion container.

In this article

Not finding the help you need?