Link copied to clipboard!

Inbox Launcher

Open the inbox to see new activity relevant to you

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.

component-inbox-launcher.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 { 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" />
      </div>
    </body>
    

Properties

Name Default Description
label “Inbox” The text label on the button. If explicitly empty, the button will not have a label.
icon-url Inbox icon If provided, changes the URL of the icon. If explicitly empty, the button will not have an icon.
inbox-badge-style badge_with_count Controls 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 true Controls whether clicking the launch also opens the cord-inbox component in an accompanying modal. If false, the button will only do what you specify in on-click
show-settings true If show-inbox-on-click is true, show/hide the cog icon which leads to the settings page in the inbox modal.

Events

Name Description
cord-inbox-launcher:click The inbox launcher button was clicked.

CSS Custom Properties

Name Default
--cord-inbox-launcher-font-size 14px
--cord-inbox-launcher-text-color --cord-secondary-button-content-color
--cord-inbox-launcher-text-color--hover --cord-secondary-button-content-color--hover
--cord-inbox-launcher-text-color--active --cord-secondary-button-content-color--active
--cord-inbox-launcher-text-color--disabled --cord-secondary-button-content-color--disabled
--cord-inbox-launcher-background-color --cord-secondary-button-background-color
--cord-inbox-launcher-background-color--hover --cord-secondary-button-background-color--hover
--cord-inbox-launcher-background-color--active --cord-secondary-button-background-color--active
--cord-inbox-launcher-background-color--disabled --cord-secondary-button-background-color--disabled
--cord-inbox-launcher-padding 6px 8px
--cord-inbox-launcher-gap 4px
--cord-inbox-launcher-icon-size 20px
--cord-inbox-launcher-badge-background-color --cord-color-notification
--cord-inbox-launcher-badge-text-color --cord-color-base
--cord-inbox-launcher-inbox-z-index 2147483645
--cord-inbox-launcher-inbox-offset 0px
--cord-inbox-launcher-inbox-box-shadow --cord-shadow-large

In this section