Notification button component

<wy-notification-button> | WyNotificationButton

Weavy notification button component to render a button complete with a realtime badge for the number of unread notifications. When clicking the button, it opens a built in overlay displaying the full list of notifications.

Weavy automatically creates notifications for reactions, mentions and other activities.

The notifications can be clicked or marked as read or unread. When clicked the notification fires a "wy-link" event with information about the originating Weavy component for the notification. This can be used to handle navigation in the app, back to where the originating Weavy component is placed.

The notification button component can optionally be tailored to only show notifications for a specific app or notifications of a specific type, such as mentions or reactions. When setting a predefined notification type, it removes the possibility for the user to filter the list by type in the UI.

Complement this with the Notification toasts component to also get realtime in-app notifications or browser notifications.

Component layout

The button is displayed as a clickable icon that acts as a button. The default size of the button is the icon size 1.5rem/24px together with the set --wy-padding (which defaults to .5rem/8px) on every side of the icon, which makes a total of 2.5rem/40px per default.

The openable notification list renders in an overlay in the top layer. That means that the notification list does not occupy any visual layout space where it's placed in the DOM, it only renders in the top layer.

You can add additional styling using CSS Custom Properties and CSS Shadow Parts and further customization using slots. You can for instance set the background color of the wy-badge CSS shadow part.

wy-notification-button::part(wy-badge) {
  background-color: violet;
}

Importing

If you added the UIKit with npm you can use the following snippet to import the component into your project.

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

Examples

Example: Display a button with a badge of unread notifications. Clicking the button opens a notification list.

<wy-notification-button></wy-notification-button>

Example: Filter notifications to show only those from a specific app. Also, show a dot instead of a count when there are unread notifications.

<wy-notification-button uid="test-chat" badge="dot"></wy-notification-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`.
`directory`	`string`	When set, only shows notifications from apps in the specified directory.
`typeFilter`	`"", "activity", "mention", "reaction"`	Notification type filter. No filter (`""`) will allow the user to filter.
`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.
`overlay`	`"modal", "drawer", "sheet", "full", "none"`	Overlay appearance used for the notification list.

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`.
`directory`	`string`		When set, only shows notifications from apps in the specified directory.
`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).
`overlay`	`"modal", "drawer", "sheet", "full", "none"`	`"sheet"`	Overlay appearance used for the notification list.
`typeFilter`	`"" , "activity" , "mention" , "reaction"`	`""`	Notification type filter. No filter (`""`) will allow the user to filter.
`unread`	`number`	readonly	The number of unread notifications currently displayed in the component. 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.
`whenReady()`	async	Resolves when the component has rendered the first time.

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-action`	`WyActionEventType`	Emitted when a notification is selected.
`wy-app`	`WyAppEventType`	Emitted when the app changes.
`wy-link`	`WyLinkEventType`	Emitted when a notification is clicked.
`wy-unread`	`WyUnreadEventType`	Emitted when the number of unread notifications displayed in the component changes.

Slots

The slots can be used to inject elements into the component. All predefined child nodes of the slot will be replaced with the injected content.

Slot	Description
`actions`	Action buttons placed in the right side of the overlay header. Replaces existing buttons.
`title`	Title in the the overlay header. Replaces existing title.

To prevent child nodes from rendering before the component has loaded you can hide them using CSS.

wy-notification-button:not(:defined) {
  display: none;
}