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

Customizing Notification

Variables

The following table lists the available variables for customization.

NameTypeDefault valueComputed value
$kendo-notification-group-gapNumberk-map-get( $kendo-spacing, 3 )0.75rem
Description
The row-gap between the elements in the Notification group.
$kendo-notification-padding-xNumber$alert-padding-x1rem
Description
The horizontal padding of the Notification.
$kendo-notification-padding-yNumber$alert-padding-y1rem
Description
The vertical padding of the Notification.
$kendo-notification-border-widthNumber$alert-border-width1px
Description
The width of the border around the Notification.
$kendo-notification-border-radiusNumber$alert-border-radius0.375rem
Description
The border radius of the Notification.
$kendo-notification-font-familyList$kendo-font-familysystem-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"
Description
The font family of the Notification.
$kendo-notification-font-sizeNumber$kendo-font-size-sm0.875rem
Description
The font size of the Notification.
$kendo-notification-line-heightNumber$kendo-line-height-md1.5
Description
The line height of the Notification.
$kendo-notification-bgColor$kendo-component-bg#ffffff
Description
The background color of the Notification.
$kendo-notification-textColor$kendo-component-text#212529
Description
The text color of the Notification.
$kendo-notification-borderColor$kendo-component-border#dee2e6
Description
The border color of the Notification.
$kendo-notification-shadowString$kendo-popup-shadowvar(--kendo-elevation-4, 0px 6px 13px rgba(0, 0, 0, 0.125))
Description
The box shadow of the Notification.
$kendo-notification-icon-spacingNumber$kendo-icon-spacing0.5rem
Description
The horizontal spacing of the Notification icon.
$kendo-notification-theme-colorsMap$kendo-theme-colors("primary": #0d6efd, "secondary": #6c757d, "tertiary": #6f42c1, "info": #0dcaf0, "success": #198754, "warning": #ffc107, "error": #dc3545, "dark": #212529, "light": #f8f9fa, "inverse": #212529)
Description
The theme colors map for the Notification.
$kendo-notification-themeMapnotification-theme( $kendo-notification-theme-colors )("inverse": (color: #111315, background-color: #c1c2c3, border: #d3d3d4), "light": (color: #818182, background-color: #fdfdfe, border: #fefefe), "dark": (color: #111315, background-color: #c1c2c3, border: #d3d3d4), "error": (color: #721c24, background-color: #f5c6cb, border: #f8d7da), "warning": (color: #856404, background-color: #ffeeba, border: #fff3cd), "success": (color: #0d462c, background-color: #bfddcf, border: #d1e7dd), "info": (color: #07697d, background-color: #bbf0fb, border: #cff4fc), "tertiary": (color: #3a2264, background-color: #d7caee, border: #e2d9f3), "secondary": (color: #383d41, background-color: #d6d8db, border: #e2e3e5), "primary": (color: #073984, background-color: #bbd6fe, border: #cfe2ff))
Description
The generated theme colors map for the Notification.

In this article

Not finding the help you need?