Skip to main content

​
About Side Panel

Side Panel is a slide-out panel that appears from the right edge of the screen. Use it to display contextual information, detailed views, or supplementary content without navigating away from the current page.

​
Components

  • SidePanelContainer - Manages panel state
  • SidePanel - Main panel container
  • SidePanelHeader - Header section with title
  • SidePanelHeaderActions - Action buttons in header
  • SidePanelBody - Main content area
  • SidePanelFooter - Footer section
  • SidePanelButton - Button to trigger panel
  • SidePanelBadgeButton - Badge button trigger
  • SidePanelPushContentWrapper - Pushes content when panel opens
  • useSidePanelState - State management hook

​
Installation

yarn add @twilio-paste/side-panel

​
Usage

import {
  SidePanelContainer,
  SidePanel,
  SidePanelButton,
  SidePanelHeader,
  SidePanelHeaderActions,
  SidePanelBody,
  SidePanelFooter,
  useSidePanelState
} from '@twilio-paste/side-panel';
import { Button } from '@twilio-paste/button';

const MySidePanel = () => {
  const { isOpen, setIsOpen } = useSidePanelState();
  
  return (
    <SidePanelContainer
      isOpen={isOpen}
      setIsOpen={setIsOpen}
    >
      <SidePanelButton>Open Panel</SidePanelButton>
      <SidePanel label="Details">
        <SidePanelHeader>
          <h2>Panel Title</h2>
          <SidePanelHeaderActions>
            <Button variant="secondary" size="small">Edit</Button>
          </SidePanelHeaderActions>
        </SidePanelHeader>
        <SidePanelBody>
          <p>Panel content goes here...</p>
        </SidePanelBody>
        <SidePanelFooter>
          <Button variant="primary" onClick={() => setIsOpen(false)}>
            Close
          </Button>
        </SidePanelFooter>
      </SidePanel>
    </SidePanelContainer>
  );
};

​
Props

​
SidePanelContainer

​
SidePanel

​
SidePanelButton

Accepts all Button props.

​
SidePanelBody

​
SidePanelFooter

​
State Management

Use useSidePanelState hook: 
const { isOpen, setIsOpen } = useSidePanelState({ open: false });

// Control the panel
setIsOpen(true);  // Open
setIsOpen(false); // Close
setIsOpen(!isOpen); // Toggle

​
Push Content Wrapper

Use SidePanelPushContentWrapper to push page content when panel opens: 
import { SidePanelPushContentWrapper } from '@twilio-paste/side-panel';

<SidePanelContainer isOpen={isOpen} setIsOpen={setIsOpen}>
  <SidePanelPushContentWrapper>
    <main>
      {/* Main page content gets pushed when panel opens */}
    </main>
  </SidePanelPushContentWrapper>
  <SidePanel label="Details">
    {/* panel content */}
  </SidePanel>
</SidePanelContainer>

​
Footer Variants

​
Default Footer

For standard actions: 
<SidePanelFooter justifyContent="flex-end">
  <Button variant="secondary">Cancel</Button>
  <Button variant="primary">Save</Button>
</SidePanelFooter>

​
Chat Footer

For AI chat interfaces: 
import { ChatComposerContainer, ChatComposer } from '@twilio-paste/chat-composer';

<SidePanelFooter variant="chat">
  <ChatComposerContainer>
    <ChatComposer config={{ namespace: 'chat' }} />
  </ChatComposerContainer>
</SidePanelFooter>

​
Accessibility

  • Side Panel has proper ARIA labeling
  • Focus is trapped within the panel when open
  • Escape key closes the panel
  • Close button is keyboard accessible
  • Panel state is announced to screen readers

​
Animation

Side Panel slides in from the right with smooth transitions.

​
Related components

  • Modal - For blocking interactions
  • Popover - For contextual content
  • Sidebar - For primary navigation

Build docs developers (and LLMs) love

Get started for freeTalk to us