Link copied to clipboard!
Mobile navigation button - closed state

Inbox

Find all messages relevant to you, in one handy place


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 an InboxLauncher with the default settings, you do not need to add a separate Inbox component to your page. However, if you use an InboxLauncher and set show-inbox-on-click="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 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"></cord-inbox>
      </div>
    </body>
    

Properties

Attributes & Events

Properties
showCloseButton optional default: true

Whether to show the close button in the top right corner of the inbox.

showSettings optional default: true

Whether to show the cog icon which leads to the settings page.

onCloseRequested optional

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

Attributes
show-close-button optional default: true

Whether to show the close button in the top right corner of the inbox.

show-settings optional default: true

Whether to show the cog icon which leads to the settings page.

Events
cord-inbox:closeRequested

This event is fired 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 --cord-color-base
#FFFFFF
--cord-inbox-border 1px solid var(--cord-color-base-x-strong)
--cord-inbox-border-radius --cord-border-radius-medium
4px
--cord-inbox-height 600px
--cord-inbox-width 400px

Next up