Documentation Index
Fetch the complete documentation index at: https://mintlify.com/Twilio-labs/paste/llms.txt
Use this file to discover all available pages before exploring further.
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
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>
);
};
SidePanelContainer
SidePanel
SidePanelButton
Accepts all Button props.
SidePanelBody
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>
<SidePanelFooter justifyContent="flex-end">
<Button variant="secondary">Cancel</Button>
<Button variant="primary">Save</Button>
</SidePanelFooter>
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
