Notification List Launcher
Display a simple launcher button to open a notification list anywhere
Live Demo
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 />.
Send your own notifications via Cord
Our REST API enables you to push custom notifications into the list. Out of the box, you get read/unread tracking, mark-all-as-read and much more.
How to use
import { NotificationListLauncher } from "@cord-sdk/react";
export const Example = () => {
return (
<NotificationListLauncher />
);
};Copy
Properties
label
optional
string
This sets the text label on the launcher button.
The default label is an empty string which means the button will not have a label
iconURL
optional
string
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.
The default setting is
Bell icon. If set to an empty string, the button will
have no icon.badgeStyle
optional
string
This customizes how the launcher button indicates that there are new notifications. You can set it to one of the three following values:
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.badge: This will show a blue bubble on the top right of the button if there is at least one unread notification.none: There will be no indication of unread notifications in the button.
The default setting is
badge_with_count. We strongly
discourage using this option, as it greatly reduces
the discoverability of the conversation users have started.disabled
optional
boolean
This controls whether the button is disabled or not.
The default is set to
false.maxCount
optional
number
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
optional
number
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.
showPlaceholder
optional
boolean
If
false, when the notification list has no notifications, it will show a completely empty container. If set to true, it will instead show a placeholder, containing a description of the types of notifications a user will see.The default value is
true.onClick
optional
function
Callback invoked when the launcher button is clicked.
CSS Variables
These can be used to customize the component. You can learn more about customization here.
Name Default Value
--cord-color-notification:#0079FF;--cord-color-notification-background:#0079ff1a;--cord-notification-list-background-color:var(--cord-color-base, #FFFFFF);--cord-notification-list-border:1px solid var(--cord-color-base-x-strong, #DADCE0);--cord-notification-list-border-radius:var(--cord-border-radius-large, calc(var(--cord-border-radius-medium, var(--cord-space-3xs, 4px)) * 2));--cord-notification-list-box-shadow:var(--cord-shadow-large, 0 var(--cord-space-4xs, 2px) var(--cord-space-m, 16px) 0 rgba(0,0,0,0.16));--cord-notification-list-content-padding:var(--cord-space-xs, 12px);--cord-notification-list-content-gap:var(--cord-space-xs, 12px);--cord-notification-list-launcher-font-size:var(--cord-font-size-body, 14px);--cord-notification-list-launcher-text-color:var(--cord-secondary-button-content-color, var(--cord-color-content-emphasis, #121314));--cord-notification-list-launcher-text-color--hover:var(--cord-secondary-button-content-color--hover, var(--cord-color-content-emphasis, #121314));--cord-notification-list-launcher-text-color--active:var(--cord-secondary-button-content-color--active, var(--cord-color-base, #FFFFFF));--cord-notification-list-launcher-text--disabled:var(--cord-secondary-button-content-color--disabled, var(--cord-color-content-secondary, #97979F));--cord-notification-list-launcher-background-color:var(--cord-secondary-button-background-color, var(--cord-color-base-strong, #F6F6F6));--cord-notification-list-launcher-background-color--hover:var(--cord-secondary-button-background-color--hover, var(--cord-color-base-x-strong, #DADCE0));--cord-notification-list-launcher-background-color--active:var(--cord-secondary-button-background-color--active, var(--cord-color-brand-primary, #121314));--cord-notification-list-launcher-background-color--disabled:var(--cord-secondary-button-background-color--disabled, var(--cord-color-base-strong, #F6F6F6));--cord-notification-list-launcher-padding:6px 8px;--cord-notification-list-launcher-gap:var(--cord-space-3xs, 4px);--cord-notification-list-launcher-icon-size:var(--cord-space-l, 20px);--cord-notification-list-launcher-height:var(--cord-button-height-auto, auto);--cord-notification-list-launcher-border:var(--cord-button-border-none, none);--cord-notification-list-launcher-offset:var(--cord-space-3xs, 4px);--cord-notification-list-launcher-badge-background-color:var(--cord-color-notification, #0079FF);--cord-notification-list-launcher-badge-text-color:var(--cord-color-base, #FFFFFF);--cord-notification-list-launcher-list-z-index:2147483645;--cord-notification-background-color:var(--cord-color-base, #FFFFFF);--cord-notification-background-color--hover:var(--cord-color-base-strong, #F6F6F6);--cord-notification-box-shadow:none;--cord-notification-header-text-color:var(--cord-color-content-primary, #696A6C);--cord-notification-header-emphasis-text-color:var(--cord-color-content-emphasis, #121314);--cord-notification-content-text-color:var(--cord-color-content-primary, #696A6C);--cord-notification-content-emphasis-text-color:var(--cord-color-content-emphasis, #121314);--cord-notification-unread-background-color:var(--cord-color-notification, #0079FF);--cord-notification-unread-background-color-opacity:0.04;--cord-notification-unread-background-color--hover:var(--cord-notification-unread-background-color, var(--cord-color-notification, #0079FF));--cord-notification-unread-background-color-opacity--hover:0.06;--cord-notification-unread-badge-color:var(--cord-color-notification, #0079FF);--cord-notification-unread-timestamp-text-color:var(--cord-color-notification, #0079FF);--cord-notification-read-timestamp-text-color:var(--cord-color-content-secondary, #97979F);--cord-notification-border:1px none transparent;--cord-notification-border-radius:var(--cord-border-radius-medium, var(--cord-space-3xs, 4px));--cord-notification-list-height:auto;--cord-notification-list-width:auto;
