Link copied to clipboard!
Mobile navigation button - closed state

Sidebar Launcher

Open and close the sidebar from anywhere


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 show-launcher="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>
    );
    
  • <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>
    

Properties

Attributes & Events

Properties
label optional default: Comment

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

iconUrl optional default: Comment 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.

disabled optional default: false

Whether the button should be disabled.

onClick optional

Callback invoked when the launcher button is clicked.

Attributes
label optional default: Comment

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

icon-url optional default: Comment 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.

disabled optional default: false

Whether the button should be disabled.

Events
cord-sidebar-launcher:click

This event is fired 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-background-color --cord-secondary-button-background-color
#F6F6F6
--cord-sidebar-launcher-text-color --cord-secondary-button-content-color
#121314
--cord-sidebar-launcher-badge-background-color --cord-color-notification
#0079FF
--cord-sidebar-launcher-badge-text-color --cord-color-base
#FFFFFF
--cord-sidebar-launcher-font-size 14px
--cord-sidebar-launcher-icon-size 20px

Next up