Top
Notification - Styling & Theming
Notification
There are a number of ways to style notifications, and there are a number of dedicated props for the most common styling needs. Below you can find a list explaining each of them.
Each of the following styling props can be applied either to the <NotificationBoard /> or notification configs.
  • style: Object - can be applied either to the <NotificationBoard /> or to a single notification.
  • border: String - can be applied either to the <NotificationBoard /> or to a single notification.
  • borderRadius: Number - can be applied either to the <NotificationBoard /> or to a single notification.
  • background: String - can be applied either to the <NotificationBoard /> or to a single notification.
  • padding: Number (or Object or String) - can be applied either to the <NotificationBoard /> or to a single notification.
  • shadow: Bool - can be applied either to the <NotificationBoard /> or to a single notification.
  • opacity: Number - can be applied either to the <NotificationBoard /> or to a single notification.
    When custom opacity is specified, if clearOpacityOnMouseEnter=true (defaults to true), the opacity is cleared when the mouse enters the notification and restored when the mouse leaves the notification.
  • minSize: Number|String|Object - can be applied either to the <NotificationBoard /> or to a single notification.
  • maxSize: Number|String|Object - can be applied either to the <NotificationBoard /> or to a single notification.
  • width: Number - can be applied either to the <NotificationBoard /> or to a single notification.
  • height: Number - can be applied either to the <NotificationBoard /> or to a single notification.
Below you can find a list with all the css classes applied to <NotificationBoard /> components and when/how they are applied.
ClassNameDescription
zippy-react-toolkit-notification
This is the block className for all notifications being displayed. Always applied.
zippy-react-toolkit-notification--visible
This is the block className for all visible notifications.
zippy-react-toolkit-notification__header
Applied to the notification header. The header contains the title and the buttons (close, pin).
zippy-react-toolkit-notification__close-button
Applied to the notification close button wrapper div.
zippy-react-toolkit-notification__pin-button
Applied to the notification pin button wrapper div.
zippy-react-toolkit-notification__pin-button--active
Applied to the notification pin button wrapper div when the notification is pinned.
zippy-react-toolkit-notification__title
Applied to the notification title.
zippy-react-toolkit-notification__title--ellipsis
Applied to the notification title when titleEllipsis=true.
zippy-react-toolkit-notification--stacking-[STACKING]
Applied with the value of the stacking prop. Example value: zippy-react-toolkit-notification--stacking-bottom-left.
zippy-react-toolkit-notification--relative-to-viewport
Applied to the notifications when relativeToViewport=true.
zippy-react-toolkit-notification--rtl
Applied to the notifications when rtl=true.
zippy-react-toolkit-notification--move-transition
Applied to the notifications when moveTransition=true.