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

Customizing Notification

Variables

The following table lists the available variables for customization.

NameTypeDefault valueComputed value
$kendo-notification-group-gapStringk-spacing(2)var(--kendo-spacing-2, 0.5rem)
Description
The row-gap between the elements in the Notification group.
$kendo-notification-padding-xStringk-spacing(3)var(--kendo-spacing-3, 0.75rem)
Description
The horizontal padding of the Notification.
$kendo-notification-padding-yStringk-spacing(2)var(--kendo-spacing-2, 0.5rem)
Description
The vertical padding of the Notification.
$kendo-notification-border-widthNumber1px1px
$kendo-notification-border-radiusStringk-spacing(0.5)var(--kendo-spacing-0\.5, 0.125rem)
Description
The border radius of the Notification.
$kendo-notification-font-familyStringvar( --kendo-font-family, inherit )var(--kendo-font-family, inherit)
Description
The font family of the Notification.
$kendo-notification-font-sizeStringvar( --kendo-font-size-sm, inherit )var(--kendo-font-size-sm, inherit)
Description
The font size of the Notification.
$kendo-notification-line-heightStringvar( --kendo-line-height, normal )var(--kendo-line-height, normal)
Description
The line height of the Notification.
$kendo-notification-bgStringvar( --kendo-component-bg, inherit )var(--kendo-component-bg, inherit)
Description
The background color of the Notification.
$kendo-notification-textStringvar( --kendo-component-text, inherit )var(--kendo-component-text, inherit)
Description
The text color of the Notification.
$kendo-notification-borderStringvar( --kendo-component-border, inherit )var(--kendo-component-border, inherit)
Description
The border color of the Notification.
$kendo-notification-box-shadowStringnonenone
Description
The box shadow of the Notification.
$kendo-notification-icon-spacingStringk-spacing(2)var(--kendo-spacing-2, 0.5rem)
Description
The horizontal spacing of the Notification icon.
$kendo-notification-close-icon-spacingStringk-spacing(4)var(--kendo-spacing-4, 1rem)
Description
The horizontal spacing of the Notification close icon.
$kendo-notification-icon-textStringvar( --kendo-component-text, inherit )var(--kendo-component-text, inherit)
Description
The color of the Notification icon.
$kendo-notification-brand-colorsMap( primary: primary, error: error, warning: warning, success: success, info: info, secondary: if($kendo-enable-color-system, secondary, neutral), tertiary: tertiary, )
  • primary: primary
  • error: error
  • warning: warning
  • success: success
  • info: info
  • secondary: secondary
  • tertiary: tertiary
Description
The theme variations for the Notification.
$kendo-notification-theme-colorsMap()
  • primary: "bg":"var(--kendo-color-primary-subtle, #deecf9)","text":"var(--kendo-color-primary-on-subtle, #001c30)","border":"var(--kendo-color-primary-subtle, #deecf9)"
  • error: "bg":"var(--kendo-color-error-subtle, #fde7e9)","text":"var(--kendo-color-error-on-subtle, #420f12)","border":"var(--kendo-color-error-subtle, #fde7e9)"
  • warning: "bg":"var(--kendo-color-warning-subtle, #fff4ce)","text":"var(--kendo-color-warning-on-subtle, #323130)","border":"var(--kendo-color-warning-subtle, #fff4ce)"
  • success: "bg":"var(--kendo-color-success-subtle, #dff6dd)","text":"var(--kendo-color-success-on-subtle, #063206)","border":"var(--kendo-color-success-subtle, #dff6dd)"
  • info: "bg":"var(--kendo-color-info-subtle, #cee5ff)","text":"var(--kendo-color-info-on-subtle, #032040)","border":"var(--kendo-color-info-subtle, #cee5ff)"
  • secondary: "bg":"var(--kendo-color-secondary-subtle, #faf9f8)","text":"var(--kendo-color-secondary-on-subtle, #323130)","border":"var(--kendo-color-secondary-subtle, #faf9f8)"
  • tertiary: "bg":"var(--kendo-color-tertiary-subtle, #deecf9)","text":"var(--kendo-color-tertiary-on-subtle, #174974)","border":"var(--kendo-color-tertiary-subtle, #deecf9)"
  • dark: "bg":"var(--kendo-color-dark, #323130)","text":"var(--kendo-color-on-dark, #ffffff)","border":"var(--kendo-color-dark, #323130)"
  • light: "bg":"var(--kendo-color-light, #d2d0ce)","text":"var(--kendo-color-on-light, #323130)","border":"var(--kendo-color-light, #d2d0ce)"
Description
The theme colors map for the Notification variations.

In this article

Not finding the help you need?