Inbox Launcher

Open the inbox to see new activity relevant to you


Live Demo

When to use

The InboxLauncher is a button you can use to open the Inbox. By default, clicking the launcher will open the inbox in a modal floating next to the button, but you can also configure custom behavior.

You can customize the icon and text on the button, as well as the notification badging style.

As well as the CSS custom properties listed at the bottom of this page, you can use the properties on the Inbox component to configure the default inbox that appears. For example, to change the width of the popup you can set the --cord-inbox-width variable in your CSS.

This component pairs well with:


How to use

If you use this component's default settings, you do not need to add a separate Inbox component to your page. However, if you 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 click event and the Inbox closeRequested event and running your own functions as required.

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

export const Example = () => (
  <body>
    <div id="header">
      <InboxLauncher inboxBadgeStyle="badge" />
    </div>
  </body>
);
Copy

Properties


label

optional
string
This sets the text label on the "Inbox" button.
The default label is Inbox. If set to an empty string, the button will not have a label.

iconUrl

optional
string
This URL sets the image used as the icon on the "Inbox" button.
The default setting is Inbox icon. If set to an empty string, the button will have no icon.

inboxBadgeStyle

optional
string
This customizes how the Inbox button indicates that there are new messages. You can set it to one of the three following values:
  1. badge_with_count: This will show a bubble on the top right of the button. Inside the bubble, the number of unread messages will be displayed.
  2. badge: This will show a blue bubble on the top right of the button if there is at least one unread message.
  3. none: There will be no indication of unread messages in the button.
The default setting is badge_with_count. We strongly discourage using this option, as it greatly reduces the discoverability of the conversation users have started.

showInboxOnClick

optional
boolean
When true, clicking the button will open the cord-inbox component in a modal and trigger the on-click event. When false, the button will only trigger the on-click event. This is useful when you have custom logic or layout in your application to handle the Inbox component popup.
The default setting is set to true.

showSettings

optional
boolean
When true, the "Inbox" modal will show the cog icon which leads to the settings page.
The default setting is set to true.
Note: This will only have an effect if the show-inbox-on-click prop/attribute 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.

onClick

optional
function
Callback invoked when the "Inbox" button is clicked.

CSS Variables

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

Name Default Value
--cord-inbox-launcher-font-size
var(--cord-font-size-body, 14px);
--cord-inbox-launcher-text-color
var(--cord-secondary-button-content-color, var(--cord-color-content-emphasis, #121314));
--cord-inbox-launcher-text-color--hover
var(--cord-secondary-button-content-color--hover, var(--cord-color-content-emphasis, #121314));
--cord-inbox-launcher-text-color--active
var(--cord-secondary-button-content-color--active, var(--cord-color-base, #FFFFFF));
--cord-inbox-launcher-text-color--disabled
var(--cord-secondary-button-content-color--disabled, var(--cord-color-content-secondary, #97979F));
--cord-inbox-launcher-background-color
var(--cord-secondary-button-background-color, var(--cord-color-base-strong, #F6F6F6));
--cord-inbox-launcher-background-color--hover
var(--cord-secondary-button-background-color--hover, var(--cord-color-base-x-strong, #DADCE0));
--cord-inbox-launcher-background-color--active
var(--cord-secondary-button-background-color--active, var(--cord-color-brand-primary, #121314));
--cord-inbox-launcher-background-color--disabled
var(--cord-secondary-button-background-color--disabled, var(--cord-color-base-strong, #F6F6F6));
--cord-inbox-launcher-padding
6px 8px;
--cord-inbox-launcher-height
var(--cord-button-height-auto, auto);
--cord-inbox-launcher-gap
var(--cord-space-3xs, 4px);
--cord-inbox-launcher-border
var(--cord-button-border-none, none);
--cord-inbox-launcher-icon-size
var(--cord-space-l, 20px);
--cord-inbox-launcher-badge-background-color
var(--cord-color-notification, #0079FF);
--cord-inbox-launcher-badge-text-color
var(--cord-color-base, #FFFFFF);
--cord-inbox-launcher-inbox-z-index
2147483645;
--cord-inbox-launcher-inbox-offset
0px;
--cord-inbox-launcher-inbox-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-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;