Display a simple launcher button to open a notification list anywhere
This component is currently in BETA mode, and its default design and customizability options are subject to change.
When to Use
The NotificationListLauncher displays a button that will open and close a NotificationList when it is clicked. The notification list will appear in a floating modal below the button.
The icon and text of the button can be customized.
This component accepts all of the properties/attributes and CSS variables that a NotificationList accepts. These properties/attributes and CSS variables will be applied to the NotificationList rendered by the NotificationListLauncher.
There is additionally a REST
API which allows custom notifications to be injected into the list.
This sets the text label on the launcher button. When set to an empty string, the button will not have a label.
iconURL
optionaldefault: Bell icon
This URL sets the image used as the icon for the launcher button. When set to an empty string, the button will not have an icon.
badgeStyle
optionaldefault: badge_with_count
This customizes how the launcher button indicates that there are new notifications. You can set it to one of the three following values:
1. badge_with_count: This will show a bubble on the top right of the button. Inside the bubble, the number of unread notifications will be displayed. 2. badge: This will show a bubble on the top right of the button if there is at least one unread notification. 3. none: There will be no indication of unread notifications in the button. We strongly discourage using this option, as it greatly reduces the discoverability of the conversation users have started.
disabled
optionaldefault: false
This controls whether the button is disabled or not.
maxCount
optionaldefault: 10
When the list first loads, this is the maximum number of notifications which will be initially loaded and displayed. If this value is set too small, there may not be enough notifications fetched to fill the list. If this value is set too large, it will take an unnecessarily long time to fetch and display so many notifications. The default value strikes a reasonable balance, and only needs to be changed if the notification list is especially tall.
fetchAdditionalCount
optionaldefault: 3
When the list is scrolled all the way to the bottom, this is the number of notifications which will loaded into the bottom of the list to allow the user to continue scrolling. Increasing this value trades fewer server roundtrips for each individual load taking more time. The default value strikes a reasonable balance for nearly all use-cases.
onClick
optional
Callback invoked when the launcher button is clicked.
label
optionaldefault: ''
This sets the text label on the launcher button. When set to an empty string, the button will not have a label.
icon-url
optionaldefault: Bell icon
This URL sets the image used as the icon for the launcher button. When set to an empty string, the button will not have an icon.
badge-style
optionaldefault: badge_with_count
This customizes how the launcher button indicates that there are new notifications. You can set it to one of the three following values:
1. badge_with_count: This will show a bubble on the top right of the button. Inside the bubble, the number of unread notifications will be displayed. 2. badge: This will show a bubble on the top right of the button if there is at least one unread notification. 3. none: There will be no indication of unread notifications in the button. We strongly discourage using this option, as it greatly reduces the discoverability of the conversation users have started.
disabled
optionaldefault: false
This controls whether the button is disabled or not.
max-count
optionaldefault: 10
When the list first loads, this is the maximum number of notifications which will be initially loaded and displayed. If this value is set too small, there may not be enough notifications fetched to fill the list. If this value is set too large, it will take an unnecessarily long time to fetch and display so many notifications. The default value strikes a reasonable balance, and only needs to be changed if the notification list is especially tall.
fetch-additional-count
optionaldefault: 3
When the list is scrolled all the way to the bottom, this is the number of notifications which will loaded into the bottom of the list to allow the user to continue scrolling. Increasing this value trades fewer server roundtrips for each individual load taking more time. The default value strikes a reasonable balance for nearly all use-cases.
cord-notification-list-launcher:click
This event is fired when the launcher button is clicked.
To customize the notification list and notifications themselves, please refer to the CSS variables for the NotificationListhere. All CSS variables for the NotificationList are accepted and applied accordingly.
The variables listed below are used to customize the launcher button. You can learn more about customization here.
