Customizing Notification

Variables

The following table lists the available variables for customization.

Name	Type	Default value	Computed value
$kendo-notification-group-gap	String	k-spacing(2)	var(--kendo-spacing-2, 0.5rem)
Description The row-gap between the elements in the Notification group.
$kendo-notification-padding-x	String	k-spacing(2)	var(--kendo-spacing-2, 0.5rem)
Description The horizontal padding of the Notification.
$kendo-notification-padding-y	String	k-spacing(1)	var(--kendo-spacing-1, 0.25rem)
Description The vertical padding of the Notification.
$kendo-notification-border-width	Number	1px	1px
Description The width of the border around the Notification.
$kendo-notification-border-radius	String	k-border-radius(md)!default	var(--kendo-border-radius-md, 0.25rem)
Description The border radius of the Notification.
$kendo-notification-font-family	String	var( --kendo-font-family, inherit )	var(--kendo-font-family, inherit)
Description The font family of the Notification.
$kendo-notification-font-size	String	var( --kendo-font-size-sm, inherit )	var(--kendo-font-size-sm, inherit)
Description The font size of the Notification.
$kendo-notification-line-height	String	va( --kendo-line-height, normal )	va(--kendo-line-height, normal)
Description The line height of the Notification.
$kendo-notification-bg	String	$kendo-component-bg	var(--kendo-color-surface-alt, #ffffff)
Description The background color of the Notification.
$kendo-notification-text	String	$kendo-component-text	var(--kendo-color-on-app-surface, #3d3d3d)
Description The text color of the Notification.
$kendo-notification-border	String	$kendo-component-border	var(--kendo-color-border, rgba(0, 0, 0, 0.08))
Description The border color of the Notification.
$kendo-notification-shadow	String	$kendo-popup-shadow	var(--kendo-elevation-4, 0 8px 10px rgba(0, 0, 0, 0.12), 0 4px 16px rgba(0, 0, 0, 0.12))
Description The box shadow of the Notification.
$kendo-notification-icon-spacing	String	$kendo-icon-spacing	var(--kendo-spacing-1, 0.25rem)
Description The horizontal spacing of the Notification icon.
$kendo-notification-theme-colors	Map	$kendo-theme-colors	primary: var(--kendo-color-primary, #ff6358) secondary: var(--kendo-color-secondary, #666666) tertiary: var(--kendo-color-tertiary, #03a9f4) info: var(--kendo-color-info, #0058e9) success: var(--kendo-color-success, #37b400) warning: var(--kendo-color-warning, #ffc000) error: var(--kendo-color-error, #f31700) dark: var(--kendo-color-dark, #3d3d3d) light: var(--kendo-color-light, #ebebeb) inverse: var(--kendo-color-dark, #3d3d3d)
Description The theme colors map for the Notification.
$kendo-notification-theme	Map	notification-theme( $kendo-notification-theme-colors )	inverse: "color":"var(--kendo-color-on-inverse, #ffffff)","background-color":"var(--kendo-color-dark, #3d3d3d)","border":"var(--kendo-color-dark, #3d3d3d)" light: "color":"var(--kendo-color-on-light, #000000)","background-color":"var(--kendo-color-light, #ebebeb)","border":"var(--kendo-color-light, #ebebeb)" dark: "color":"var(--kendo-color-on-dark, #ffffff)","background-color":"var(--kendo-color-dark, #3d3d3d)","border":"var(--kendo-color-dark, #3d3d3d)" error: "color":"var(--kendo-color-on-error, #ffffff)","background-color":"var(--kendo-color-error, #f31700)","border":"var(--kendo-color-error, #f31700)" warning: "color":"var(--kendo-color-on-warning, #3d3d3d)","background-color":"var(--kendo-color-warning, #ffc000)","border":"var(--kendo-color-warning, #ffc000)" success: "color":"var(--kendo-color-on-success, #ffffff)","background-color":"var(--kendo-color-success, #37b400)","border":"var(--kendo-color-success, #37b400)" info: "color":"var(--kendo-color-on-info, #ffffff)","background-color":"var(--kendo-color-info, #0058e9)","border":"var(--kendo-color-info, #0058e9)" tertiary: "color":"var(--kendo-color-on-tertiary, #ffffff)","background-color":"var(--kendo-color-tertiary, #03a9f4)","border":"var(--kendo-color-tertiary, #03a9f4)" secondary: "color":"var(--kendo-color-on-secondary, #ffffff)","background-color":"var(--kendo-color-secondary, #666666)","border":"var(--kendo-color-secondary, #666666)" primary: "color":"var(--kendo-color-on-primary, #ffffff)","background-color":"var(--kendo-color-primary, #ff6358)","border":"var(--kendo-color-primary, #ff6358)"
Description The generated theme colors map for the Notification.

Suggested Links

• Styling Overview
• Web Font Icons
• Preview of the Themed Components