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.
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>
| 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. |
| Name | Description |
|---|---|
cord-inbox-launcher:click |
The inbox launcher button was clicked. |
| 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-height |
--cord-button-height-auto |
--cord-inbox-launcher-gap |
4px |
--cord-inbox-launcher-border |
--cord-button-border-none |
--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 |