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:
  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 blue 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.
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;