Skip to content
Apps Platform

Side Panel

The Side Panel mechanism provides a consistent way to show additional content or actions without leaving the current context. It consists of three main sections: a header, content area, and footer.

You can learn more about how the Side Panel is used in apps here. The Side Panel feature can render any URL, but we provide these Side Panel components as a way to help you structure your app in a way that is harmonious with Help Scout design.

Usage

The Side Panel is composed of three sub-components:

  • SidePanel.Header - Contains the title, optional subtitle, optional back button, and optional external link
  • SidePanel.Content - The main content area
  • SidePanel.Footer - Contains primary and optional secondary action buttons
<SidePanel>
  <SidePanel.Header
    title="User Details"
    subtitle="View and edit user information"
  />
  <SidePanel.Content>Content goes here</SidePanel.Content>
  <SidePanel.Footer buttonLabel="Save Changes" secondaryButtonLabel="Cancel" />
</SidePanel>

Header Options

The header can include several optional elements:

Back Button

Add a back button by providing a goBack function:

<SidePanel.Header title="User Details" goBack={() => navigate(-1)} />

Include an external link button in the header:

<SidePanel.Header
  title="User Details"
  externalLink="https://example.com/user/123"
/>

The footer supports both primary and secondary actions:

Primary Button

A primary action button is required:

<SidePanel.Footer
  buttonLabel="Save Changes"
  onButtonClick={handleSave}
  buttonVariant="primary"
/>

Secondary Button

An optional secondary button can be added:

<SidePanel.Footer
  buttonLabel="Save Changes"
  secondaryButtonLabel="Cancel"
  onSecondaryButtonClick={handleCancel}
  secondaryButtonVariant="secondary"
/>

Disabled States with Tooltips

Buttons can be disabled with explanatory tooltips:

<SidePanel.Footer
  buttonLabel="Save Changes"
  buttonDisabled={true}
  buttonTooltip="Please fill in all required fields"
  secondaryButtonLabel="Cancel"
  secondaryButtonDisabled={true}
  secondaryButtonTooltip="Cannot cancel at this time"
/>

By default, the footer sticks to the bottom of the panel. This can be disabled:

<SidePanel stickyFooter={false}>{/* Panel contents */}</SidePanel>