Cord LogoDocs
Sign inStart now

Sidebar Launcher (Deprecated)

Components /

Open and close the sidebar from anywhere

Cord Sidebar Launcher has been deprecated and is no longer being actively developed.

To display a series of comments or threaded conversations on your page, we strongly recommend using Cord Threaded Comments, combined with Cord Notification List for better customizability and a more native feel.

Live Demo

When to use #

The SidebarLauncher component allows you to replace that default button with a customizable one that you can choose to place anywhere in your application UI.

By itself, the Sidebar component will add a floating launcher button, positioned fixed in the bottom-right corner of your app in the browser; clicking this launcher opens and closes the sidebar.

This component pairs well with:

How to use #

If you use this component, remember to pass showLauncher={false} to <Sidebar />.

React:
import { Sidebar, SidebarLauncher } from "@cord-sdk/react";

export const Example = () => (
  <body>
    <div id="header">
      <SidebarLauncher label="Collaborate" inboxBadgeStyle="badge" />
    </div>
    <Sidebar showLauncher={false} />
  </body>
);
Vanilla JavaScript:
<body>
  <div id="header">
    <cord-sidebar-launcher label="Collaborate" inbox-badge-style="badge">
    </cord-sidebar-launcher>
  </div>
  <cord-sidebar show-launcher="false"></cord-sidebar>
</body>
import { Sidebar, SidebarLauncher } from "@cord-sdk/react";

export const Example = () => (
  <body>
    <div id="header">
      <SidebarLauncher label="Collaborate" inboxBadgeStyle="badge" />
    </div>
    <Sidebar showLauncher={false} />
  </body>
);
Copy

Properties #

label #

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

iconUrl #

optional
string
If provided, changes the URL of the icon. If set to an empty string, the button will not have an icon.
The default is set to Comment icon.

inboxBadgeStyle #

optional
string
The style of the badge that appears on the button if there are inbox items. One of badge_with_count, badge or none.
The default is set to badge_with_count.

disabled #

optional
boolean
Whether the button should be disabled.
The default is set to false.

onClick #

optional
boolean
Callback invoked when the launcher button is clicked.

Ask Cordy