Notification

Notifications are UI elements for displaying important information related to a user’s actions or the system they are using.

Sass Variables

The Telerik and Kendo UI Notification enables you to configure and customize its appearance through the available Sass variables.

VariableDefault ValueComputed ValueValue
kendo-notification-group-gapk-spacing(2)var(--kendo-spacing-2, 0.5rem)Default: k-spacing(2)Computed: var(--kendo-spacing-2, 0.5rem)
Description: The row-gap between the elements in the Notification group.
kendo-notification-padding-xk-spacing(2)var(--kendo-spacing-2, 0.5rem)Default: k-spacing(2)Computed: var(--kendo-spacing-2, 0.5rem)
Description: The horizontal padding of the Notification.
kendo-notification-padding-yk-spacing(1)var(--kendo-spacing-1, 0.25rem)Default: k-spacing(1)Computed: var(--kendo-spacing-1, 0.25rem)
Description: The vertical padding of the Notification.
kendo-notification-border-width1px1pxDefault: 1pxComputed: 1px
Description: The width of the border around the Notification.
kendo-notification-border-radiusk-border-radius(md)!defaultvar(--kendo-border-radius-md, 0.25rem)Default: k-border-radius(md)!defaultComputed: var(--kendo-border-radius-md, 0.25rem)
Description: The border radius of the Notification.
kendo-notification-font-familyvar( --kendo-font-family, inherit )var(--kendo-font-family, inherit)Default: var( --kendo-font-family, inherit )Computed: var(--kendo-font-family, inherit)
Description: The font family of the Notification.
kendo-notification-font-sizevar( --kendo-font-size-sm, inherit )var(--kendo-font-size-sm, inherit)Default: var( --kendo-font-size-sm, inherit )Computed: var(--kendo-font-size-sm, inherit)
Description: The font size of the Notification.
kendo-notification-line-heightva( --kendo-line-height, normal )va(--kendo-line-height, normal)Default: va( --kendo-line-height, normal )Computed: va(--kendo-line-height, normal)
Description: The line height of the Notification.
kendo-notification-bg$kendo-component-bgvar(--kendo-color-surface-alt, #ffffff)Default: $kendo-component-bgComputed: var(--kendo-color-surface-alt, #ffffff)
Description: The background color of the Notification.
kendo-notification-text$kendo-component-textvar(--kendo-color-on-app-surface, #3d3d3d)Default: $kendo-component-textComputed: var(--kendo-color-on-app-surface, #3d3d3d)
Description: The text color of the Notification.
kendo-notification-border$kendo-component-bordervar(--kendo-color-border, rgba(0, 0, 0, 0.08))Default: $kendo-component-borderComputed: var(--kendo-color-border, rgba(0, 0, 0, 0.08))
Description: The border color of the Notification.
kendo-notification-shadow$kendo-popup-shadowvar(--kendo-elevation-4, 0 8px 10px rgba(0, 0, 0, 0.12), 0 4px 16px rgba(0, 0, 0, 0.12))Default: $kendo-popup-shadowComputed: 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$kendo-icon-spacingvar(--kendo-spacing-1, 0.25rem)Default: $kendo-icon-spacingComputed: var(--kendo-spacing-1, 0.25rem)
Description: The horizontal spacing of the Notification icon.
kendo-notification-theme-colors$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))Default: $kendo-theme-colorsComputed: ("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-themenotification-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)))Default: notification-theme( $kendo-notification-theme-colors )Computed: ("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.
Feedback