Link copied to clipboard!
Mobile navigation button - closed state

Inbox Launcher

Open the inbox to see new activity relevant to you


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 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 { InboxLauncher } from "@cord-sdk/react";
    
    export const Example = () => (
      <body>
        <div id="header">
          <InboxLauncher inboxBadgeStyle="badge" />
        </div>
      </body>
    );
    
  • <body>
      <div id="header">
        <cord-inbox-launcher inbox-badge-style="badge"></cord-inbox-launcher>
      </div>
    </body>
    

Properties

Attributes & Events

Properties
label optional default: "Inbox"

The text label on the button. If set to an empty string, the button will not have a label.

iconUrl optional default: Inbox icon

If provided, changes the URL of the icon. If set to an empty string, the button will not have an icon.

inboxBadgeStyle optional default: badge_with_count

The style of the badge that appears on the button if there are inbox items. One of badge_with_count, badge or none.

showInboxOnClick optional default: true

When true, clicking the button opens the cord-inbox component in a modal, in addition to firing the on-click event. When false, the button will fire the on-click event and do nothing else.

showSettings optional default: true

Whether to show the cog icon which leads to the settings page in the inbox modal. Only has an effect if show-inbox-on-click is true.

onClick optional default: undefined

Callback invoked when the button is clicked. If show-inbox-on-click is true, this will run in addition to opening cord-inbox in a modal.

Attributes
label optional default: "Inbox"

The text label on the button. If set to an empty string, the button will not have a label.

icon-url optional default: Inbox icon

If provided, changes the URL of the icon. If set to an empty string, the button will not have an icon.

inbox-badge-style optional default: badge_with_count

The style of the badge that appears on the button if there are inbox items. One of badge_with_count, badge or none.

show-inbox-on-click optional default: true

When true, clicking the button opens the cord-inbox component in a modal, in addition to firing the on-click event. When false, the button will fire the on-click event and do nothing else.

show-settings optional default: true

Whether to show the cog icon which leads to the settings page in the inbox modal. Only has an effect if show-inbox-on-click is true.

Events
cord-inbox-launcher:click

This event is fired when the inbox launcher button was clicked.


CSS Variables

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

Name Default Value
--cord-inbox-launcher-background-color --cord-secondary-button-background-color
#F6F6F6
--cord-inbox-launcher-text-color --cord-secondary-button-background-color
#121314
--cord-inbox-launcher-badge-background-color --cord-color-notification
#0079FF
--cord-inbox-launcher-badge-text-color --cord-color-base
#FFFFFF
--cord-inbox-launcher-font-size 14px
--cord-inbox-launcher-icon-size 20px
--cord-inbox-launcher-inbox-z-index 2147483645

Next up