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.
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.
import { beta } from "@cord-sdk/react";
export const Example = () => {
return (
<beta.NotificationList />
);
};
<cord-notification-list></cord-notification-list>
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 |