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);
