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:

Inbox →
Page Presence →

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:

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.
badge: This will show a blue bubble on the top right of the button if there is at least one unread message.
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;

Want to customize the components further?

Head to the full list of CSS Variables

Next up

Docs

Go to the Cord Console