Notification List

Display a simple list of notifications showing recent actions which may be of interest


Live Demo

When to use

The <NotificationList /> renders a list of notifications, showing users things that have happened recently which may be directly relevant to them. The list will automatically contain notifications about things that happened inside Cord components, such as the user being @-mentioned.

Send your own notifications via Cord

Our REST API enables you 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 { NotificationList } from "@cord-sdk/react";

export const Example = () => {
  return (
    <NotificationList />
  );
};
Copy

Properties


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.

filter

optional
string
A serialized JSON object that can be used to filter the notifications in the NotificationList. Currently the only valid key is metadata. The value for a metadata entry should be an object representing the metadata key/value to filter on. For example, to show only notifications with the metadata key of "category" set to "sales", set the filter to { metadata: { category: "sales" } }.

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-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;