Notification badge component

<wy-notification-badge> | WyNotificationBadge

Weavy notification badge component that renders a realtime badge for the number of unread notifications. The badge fits well into a button or similar. Weavy automatically creates notifications for reactions, mentions and other activities.

The badge can optionally be provided with an app uid or a typeFilter to only display the unread count of a given app or a given notification type, such as mention, reaction or activity.

When the unread count property changes, the component fires a "wy-unread" event with the updated count. You can listen to the event to use the unread count for something else, and you can also turn off the component rendering by setting the badge property to "none".

Component layout

The badge displays as an inline badge, matching normal text per default. It has a filled background with rounded edge. The size and font-size is relative to the current font-size where it's placed, defaulting to 0.75em for the badge font-size and 0.3333em of the badge font-size for the padding. The badge is only displayed when there is an unread count of 1 or higher.

When placing the badge in a <button> element, note that buttons initially have a font-size of 13.3333px instead of inheriting font-size from it's parents.

Setting the badge property to "compact" reduces the padding and size to occupy less visual space. It can also be set to "dot" to remove the text, only indicating that there is unread notifications without any count.

The badgePosition property can be changed from "inline" to "top-right" or any other corner, to give it absolute positioning over the top-right corner. The absolute positioning is relative to the closest parent element with set CSS position, for instance relative positioning.

Importing

If you installed the UIKit with npm you can use the following snippet to import the component into your project. Otherwise, if you installed the UIKit as a <script> you can ignore this section.

import { WyNotificationBadge } from "@weavy/uikit-web";

Examples

Inline notification badge in a text

Display a badge that shows unread count and tracks notifications for the authenticated user.

<div>Notifications <wy-notification-badge></wy-notification-badge></div>

Filtered notification badge

Only displays the count for reactions that originated from the "test-chat" app component.

<wy-notification-badge
  uid="test-chat"
  typeFilter="reaction"
></wy-notification-badge>

Compact cornered notification badge

Displays a compact badge in the top-right corner of a button with adjusted font-size. Note that the badge position is relative to its closest positioned ancestor element, therefore we need to set CSS position on the button.

<button style="position: relative;">
  <span>Notifications</span>
  <wy-notification-badge
    badge="compact"
    badgePosition="top-right"
  ></wy-notification-badge>
</button>

HTML attributes

Attributes can be set when using the component in HTML. All attributes have corresponding Javascript properties.

Most attributes are optional and/or has sensible default values. Any required attributes are indicated with an asterisk (*).

Learn more about attributes and properties.

Attribute	Value	Description
`uid`	`string, number`	Optional filter to only show notifications for app with `uid`.
`badge`	`"count", "compact", "dot", "none"`	Notification badge appearance variant.
`badgePosition`	`"top-right", "top-left", "bottom-right", "bottom-left", "inline"`	Position of the badge. `"inline"` means no positioning.
`generateUid`	`string`	Generates a `uid` by appending user and agent identifiers to the supplied string.
`typeFilter`	`"", "activity", "mention", "reaction"`	Notification type filter. No filter (`""`) will allow the user to filter.

JavaScript properties

Properties can be used in JavaScript. Some of them have corresponding HTML attributes where applicable.

Property	Type	Default	Description
`uid`	`string , number`		Optional filter to only show notifications for app with `uid`.
`app`	`AppType`		The app data available after using the optional `uid`.
`badge`	`"count", "compact", "dot", "none"`	`"compact"`	Notification badge appearance variant.
`badgePosition`	`"top-right", "top-left", "bottom-right", "bottom-left", "inline"`	`"top-right"`	Position of the badge. `"inline"` means no positioning.
`generateUid`	`string`		Sets the `uid` property with automatically appended user and agent name (where applicable).
`typeFilter`	`"" , "activity" , "mention" , "reaction"`	`""`	Notification type filter. No filter (`""`) will allow the user to filter.
`unread`	`number`	readonly	The number of unread notifications. This value updates automatically whenever data changes.

JavaScript methods

Methods for the component are available in JavaScript. Methods that are async return a promise.

Method	Returns	Description
`markAllAsRead()`	async	Marks all tracked notifications as read.
`reset()`		Sets the component to it's initial state and resets the `app` state.
`subscribe(subscribe: boolean)`	async	Subscribes or unsubscribes to notification updates from the app when using `uid`. Check `.app.is_subscribed` to see current state.
`whenApp()`	async `AppType`	Waits for `app` data when using the optional `uid` and returns the data when available.

DOM Events

The component triggers custom events that bubbles up the DOM tree. They can be listened to using the addEventListener() method.

Learn more about events.

Event	Type	Description
`wy-app`	`WyAppEventType`	Emitted when the app changes.
`wy-unread`	`WyUnreadEventType`	Emitted when the number of unread notifications displayed in the component changes.