Link copied to clipboard!
Mobile navigation button - closed state
Components

Notification List

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

This component is currently in BETA mode, and its default design and customizability options are subject to change.

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. There is additionally a REST API which allows custom notifications to be injected into the list.

How to Use

  • import { beta } from "@cord-sdk/react";

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


  • <cord-notification-list></cord-notification-list>

Properties

Attributes & Events

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.

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.

CSS Variables

These can be used to customize the component. You can learn more about customization here.

Name Default Value
--cord-notification-background-color --cord-color-base
#FFFFFF
--cord-notification-border 1px none transparent
--cord-notification-border-radius --cord-border-radius-medium
4px
--cord-notification-box-shadow none
--cord-notification-list-background-color --cord-color-base
#FFFFFF
--cord-notification-list-border 1px solid var(--cord-color-base-x-strong)
1px solid #DADCE0
--cord-notification-list-border-radius --cord-border-radius-large
8px
--cord-notification-list-box-shadow --cord-shadow-large
0 2px 16px 0 rgba(0,0,0,0.16)
--cord-notification-list-content-gap --cord-space-xs
12px
--cord-notification-list-content-padding --cord-space-xs
12px
--cord-notification-unread-background-color --cord-color-base-strong
#F6F6F6
--cord-notification-unread-background-color-opacity 0.04
--cord-notification-unread-background-color-opacity--hover 0.06
--cord-notification-unread-background-color--hover --cord-notification-unread-background-color
#F6F6F6

Want to customize the component further?

Head to the full list of CSS Variables available for the Notification List →

On this page