Sidebar Launcher

Open and close the sidebar from anywhere


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 />.

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.

CSS Variables

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

Name Default Value
--cord-sidebar-launcher-font-size
var(--cord-font-size-body, 14px);
--cord-sidebar-launcher-line-height
var(--cord-line-height-body, var(--cord-space-l, 20px));
--cord-sidebar-launcher-letter-spacing
normal;
--cord-sidebar-launcher-text-color
var(--cord-secondary-button-content-color, var(--cord-color-content-emphasis, #121314));
--cord-sidebar-launcher-text-color--hover
var(--cord-secondary-button-content-color--hover, var(--cord-color-content-emphasis, #121314));
--cord-sidebar-launcher-text-color--active
var(--cord-secondary-button-content-color--active, var(--cord-color-base, #FFFFFF));
--cord-sidebar-launcher-text-color--disabled
var(--cord-secondary-button-content-color--disabled, var(--cord-color-content-secondary, #97979F));
--cord-sidebar-launcher-background-color
var(--cord-secondary-button-background-color, var(--cord-color-base-strong, #F6F6F6));
--cord-sidebar-launcher-background-color--hover
var(--cord-secondary-button-background-color--hover, var(--cord-color-base-x-strong, #DADCE0));
--cord-sidebar-launcher-background-color--active
var(--cord-secondary-button-background-color--active, var(--cord-color-brand-primary, #121314));
--cord-sidebar-launcher-background-color--disabled
var(--cord-secondary-button-background-color--disabled, var(--cord-color-base-strong, #F6F6F6));
--cord-sidebar-launcher-padding
6px 8px;
--cord-sidebar-launcher-height
var(--cord-button-height-auto, auto);
--cord-sidebar-launcher-gap
var(--cord-space-3xs, 4px);
--cord-sidebar-launcher-border
var(--cord-button-border-none, none);
--cord-sidebar-launcher-icon-size
var(--cord-space-l, 20px);
--cord-sidebar-launcher-badge-background-color
var(--cord-color-notification, #0079FF);
--cord-sidebar-launcher-badge-text-color
var(--cord-color-base, #FFFFFF);