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.
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>
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 . |
Name | Description |
---|---|
cord-sidebar-launcher:click |
The launcher button was clicked. |
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 |