Cord SDK | Sidebar Launcher

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.

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-height`	`--cord-button-height-auto`
`--cord-sidebar-launcher-gap`	`4px`
`--cord-sidebar-launcher-border`	`--cord-button-border-none`
`--cord-sidebar-launcher-icon-size`	`20px`
`--cord-sidebar-launcher-badge-background-color`	`--cord-color-notification`
`--cord-sidebar-launcher-badge-text-color`	`--cord-color-base`