Display a simple list of notifications showing recent actions which may be of interest
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.
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.
import { NotificationList } from "@cord-sdk/react";
export const Example = () => {
return (
<NotificationList />
);
};
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.true
.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" } }
.These can be used to customize the component. You can learn more about customization here.
--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;