Display a simple launcher button to open a notification list anywhere
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 />
.
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.
import { NotificationListLauncher } from "@cord-sdk/react";
export const Example = () => {
return (
<NotificationListLauncher />
);
};
Bell icon
. If set to an empty string, the button will
have no icon.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.badge
: This will show a blue bubble on the top right
of the button if there is at least one unread notification.none
: There will be no indication of unread notifications
in the button.badge_with_count
. We strongly
discourage using this option, as it greatly reduces
the discoverability of the conversation users have started.false
.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
.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-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;