Inbox

Components /

Find all messages relevant to you, in one handy place

Live Demo

When to use

The Inbox is where you can find new and recent messages that you are subscribed to. If enabled, this is also where users can find the settings page.

This component pairs well with:

How to use

If you use the <InboxLauncher /> with default settings, you do not need to add a separate <Inbox /> component to your page. However, if you use the <InboxLauncher /> and set showInboxOnClick={false}, then you will need to add a separate <Inbox /> component. In that case, you can connect the components by adding event listeners for the <InboxLauncher /> onClick event handler and the <Inbox /> closeRequested event handler and running your own functions as required.

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

export const Example = () => (
  <body>
    <div id="header">
      <Inbox showCloseButton={false} style={{ height: "600px", width: "400px;" }} />
    </div>
  </body>
);
Copy

Properties

showCloseButton

optional
boolean
Whether to show the close button in the top right corner of the inbox.
The default setting is set to true.

showSettings

optional
boolean
Whether to show the cog icon which leads to the settings page.
The default setting is set to true.

showPlaceholder

optional
boolean
If false, when the inbox has no unread threads, it will show a completely empty container. If set to true, it will instead show a placeholder, containing a description of the types of threads a user will see in the inbox.
The default value is true.

onCloseRequested

optional
function
Callback invoked when the close button in the inbox was clicked.

CSS Variables

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

Name Default Value
--cord-inbox-background-color: 
var(--cord-color-base, #FFFFFF);
--cord-inbox-header-background-color: 
var(--cord-color-base, #FFFFFF);
--cord-inbox-content-horizontal-padding: 
var(--cord-space-2xs, 8px);
--cord-inbox-border: 
1px solid var(--cord-color-base-x-strong, #DADCE0);
--cord-inbox-border-radius: 
var(--cord-border-radius-medium, var(--cord-space-3xs, 4px));
--cord-inbox-height: 
auto;
--cord-inbox-width: 
auto;

Want to customize the components further?

Head to the full list of CSS Variables

Cord LogoDocs
Go to the Cord Console