Link copied to clipboard!

Sidebar Launcher

Open and close the sidebar from anywhere

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.

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.

component-launcher-button-9ac727.png

Usage

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" />
      </div>
      <cord-sidebar show-launcher="false" />
    </body>
    

Properties

Name Default Description
label “Comment” The text label on the button. If explicitly empty, the button will not have a label.
icon-url Comment 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.

Events

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

CSS Custom Properties

Name Default
--cord-avatar-border-radius 4px
--cord-avatar-text-color --cord-color-base
--cord-avatar-background-color --cord-color-brand-primary
--cord-facepile-background-color --cord-color-base
--cord-facepile-avatar-border-width 2px
--cord-facepile-avatar-overlap 4px
--cord-tooltip-background-color --cord-color-brand-primary
--cord-tooltip-content-color --cord-color-base
--cord-sidebar-launcher-font-size 14px
--cord-sidebar-launcher-line-height 20px
--cord-sidebar-launcher-letter-spacing normal
--cord-sidebar-launcher-text-color --cord-secondary-button-content-color
--cord-sidebar-launcher-text-color--hover --cord-secondary-button-content-color--hover
--cord-sidebar-launcher-text-color--active --cord-secondary-button-content-color--active
--cord-sidebar-launcher-text-color--disabled --cord-secondary-button-content-color--disabled
--cord-sidebar-launcher-background-color --cord-secondary-button-background-color
--cord-sidebar-launcher-background-color--hover --cord-secondary-button-background-color--hover
--cord-sidebar-launcher-background-color--active --cord-secondary-button-background-color--active
--cord-sidebar-launcher-background-color--disabled --cord-secondary-button-background-color--disabled
--cord-sidebar-launcher-padding 6px 8px
--cord-sidebar-launcher-gap 4px
--cord-sidebar-launcher-icon-size 20px
--cord-sidebar-launcher-badge-background-color --cord-color-notification
--cord-sidebar-launcher-badge-text-color --cord-color-base

In this section