Link copied to clipboard!

Inbox

Find all messages relevant to you, in one handy place

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.

component-inbox.png

Usage

If you use the default settings of InboxLauncher you do not need to add a separate Inbox component to your page. If you set show-inbox-on-click="false" then you will need to add Inbox separately. In this case you can connect the components by adding event listeners for the InboxLauncher click event and the Inbox closeRequested event and running your own functions as required.
  • import { Inbox } from "@cord-sdk/react";
    
    export const Example = () => (
      <body>
        <div id="header">
          <Inbox showCloseButton={false} />
        </div>
      </body>
    );
    
  • <body>
      <div id="header">
        <cord-inbox show-close-button="false" />
      </div>
    </body>
    

Properties

Name Default Description
show-close-button true Show/hide the close button in the top right corner of the inbox.
show-settings true Show/hide the cog icon which leads to the settings page.

Events

Name Description
cord-inbox:closeRequested The close button in the inbox was clicked.

CSS Custom Properties

Name Default
--cord-inbox-background-color --cord-color-base
--cord-inbox-header-background-color --cord-color-base
--cord-inbox-border 1px solid var(--cord-color-base-x-strong)
--cord-inbox-border-radius --cord-border-radius-medium
--cord-inbox-height 600px
--cord-inbox-width 400px

In this section