Layr
⌘K
Ctrl K
Design Systems
AI Designer
Account
Roadmap
Sign in
Twilio Paste - side-panel
Getting started
Twilio Paste
Paste UI
Pro
Components
Account Switcher
Ai Chat Log
Alert
Alert Dialog
Anchor
Aspect Ratio
Avatar
Badge
Blockquote
Breadcrumb
Button
Button Group
Callout
Card
Chart Provider
Chat Composer
Chat Log
Checkbox
Code Block
Combobox
Corner Ornament
Data Grid
Date Picker
Description List
Detail Text
Disclosure
Display Heading
Display Pill Group
Editable Code Block
Example Text
File Picker
File Uploader
Flex
Form Layout
Form Pill Group
Grid
Heading
Help Text
Icon
In Page Navigation
Inline Code
Input
Keyboard Key
Label
List
Media Object
Menu
Meter
Minimizable Dialog
Modal
Multiselect Combobox
Page Header
Pagination
Paragraph
Popover
Product Switcher
Progress Bar
Progress Steps
Radio Button Group
Radio Group
Screen Reader Only
Select
Separator
Side Modal
Side Panel
Sidebar
Sidebar Navigation
Skeleton Loader
Slider
Spinner
Stack
Status Badge
Status Menu
Summary Detail
Switch
Table
Tabs
Textarea
Time Picker
Timeline
Toast
Tooltip
Topbar
Truncate
User Dialog
Visual Picker
<p>Side Panel is primarily used within AI experiences and on pages using the filter pattern when there are too many filter options to display on the page.</p> <div class="warning-callout"> <h4>Only use one Side Panel on a page</h4> <p>We currently only support having one Side Panel open on a page. If you have questions, please post <a href="https://github.com/twilio-labs/paste/discussions" class="link" target="_blank">a GitHub Discussion</a>.</p> </div> <h3>Accessibility</h3> <ul> <li>There must be an accessible aria label. Pass the descriptive label to SidePanel using the label prop.</li> <li>The close button in the Side Panel Header as well as the Side Panel Button / Side Panel Badge Button all use aria-controls and aria-expanded to indicate the connection to and the state of the Side Panel.</li> <li>Focus is placed on the close button when the Side Panel is opened, but the Side Panel is not a focus trap. Users can tab through the Side Panel content and then tab out of the Side Panel to the main page content without closing the Side Panel.</li> </ul> <h3>Side Panel vs. Side Modal</h3> <p>Side Panel and Side Modal are both used to display additional content on the side of the main page content. Side Panel is used for content that is not blocking and can be interacted with while the main page content is still visible. Side Panels are designed to remain open while the user completes other tasks in the main content of the page. Side Modals typically need to be closed before the user returns to their main task as the Modal overlays part of the page.</p> <h2>Examples</h2> <h3>Basic Side Panel</h3> <p>Pass the isOpen and setIsOpen props to the SidePanelContainer component to control the open and close state of the Side Panel.</p> <div class="example-container"> <div class="example-header">Basic Side Panel example</div> <div class="example-content" id="basic-example"></div> </div> <h3>Side Panel with Footer</h3> <p>Use the default variant of SidePanelFooter when you need to add actions to the bottom of the Side Panel. Use the chat variant of Side Panel Footer for AI use cases.</p> <div class="example-container"> <div class="example-header">Side Panel Footer example</div> <div class="example-content" id="footer-example"></div> </div> <h3>Internationalization</h3> <p>To internationalize Side Panel, simply pass different text as children to the Side Panel components. The only exceptions are the close button in the SidePanelHeader and the SidePanelButton/SidePanelBadgeButton. To change the buttons' accessible label text, use the i18nCloseSidePanelTitle and i18nOpenSidePanel props on the SidePanelContainer.</p> <div class="example-container"> <div class="example-header">Internationalized Side Panel example</div> <div class="example-content" id="i18n-example"></div> </div> <h3>Using the state hook</h3> <p>Side Panel comes with the option of using a hook to manage the open and close state of the panel. The useSidePanelState hook returns an object to spread onto SidePanelContainer. To change the default state of the Side Panel from closed to open, pass open: true to the hook.</p> <div class="example-container"> <div class="example-header">State Hook example</div> <div class="example-content" id="hook-example"></div> </div> </div> <script> // Wait for Twilio Paste components to load setTimeout(() => { const { SidePanel, SidePanelContainer, SidePanelButton, SidePanelPushContentWrapper, SidePanelHeader, SidePanelBody, SidePanelFooter, SidePanelHeaderActions, useSidePanelState, Box, Button, Heading, Separator, Badge, ArtificialIntelligenceIcon, MoreIcon } = window.TwilioPaste; // Basic Example function createBasicExample() { let isOpen = true; const sidePanelId = 'basic-side-panel'; const container = document.createElement('div'); container.style.height = '100%'; container.style.position = 'relative'; const sidePanelContainer = document.createElement('div'); sidePanelContainer.style.display = 'flex'; sidePanelContainer.style.height = '100%'; const sidePanel = document.createElement('div'); sidePanel.style.width = '320px'; sidePanel.style.height = '100%'; sidePanel.style.backgroundColor = 'white'; sidePanel.style.borderRight = '1px solid #e1e3ea'; sidePanel.style.display = isOpen ? 'flex' : 'none'; sidePanel.style.flexDirection = 'column'; const header = document.createElement('div'); header.style.padding = '16px'; header.style.borderBottom = '1px solid #e1e3ea'; header.style.display = 'flex'; header.style.alignItems = 'center'; header.style.gap = '8px'; const icon = document.createElement('div'); icon.innerHTML = '🤖'; icon.style.fontSize = '20px'; const title = document.createElement('h3'); title.textContent = 'Assistant'; title.style.margin = '0'; title.style.fontSize = '18px'; title.style.fontWeight = '600'; title.style.flex = '1'; const closeButton = document.createElement('button'); closeButton.innerHTML = '×'; closeButton.style.background = 'none'; closeButton.style.border = 'none'; closeButton.style.fontSize = '20px'; closeButton.style.cursor = 'pointer'; closeButton.style.padding = '4px 8px'; closeButton.style.borderRadius = '4px'; closeButton.onclick = () => togglePanel(); header.appendChild(icon); header.appendChild(title); header.appendChild(closeButton); const body = document.createElement('div'); body.style.padding = '16px'; body.style.flex = '1'; body.textContent = 'Side Panel content goes here.'; const footer = document.createElement('div'); footer.style.padding = '16px'; footer.style.borderTop = '1px solid #e1e3ea'; footer.textContent = 'Footer content goes here.'; sidePanel.appendChild(header); sidePanel.appendChild(body); sidePanel.appendChild(footer); const content = document.createElement('div'); content.style.flex = '1'; content.style.padding = '16px'; content.style.backgroundColor = '#f4f4f6'; const toggleButton = document.createElement('button'); toggleButton.textContent = 'Toggle Side Panel'; toggleButton.style.padding = '8px 16px'; toggleButton.style.backgroundColor = '#0263e0'; toggleButton.style.color = 'white'; toggleButton.style.border = 'none'; toggleButton.style.borderRadius = '4px'; toggleButton.style.cursor = 'pointer'; toggleButton.onclick = () => togglePanel(); content.appendChild(toggleButton); function togglePanel() { isOpen = !isOpen; sidePanel.style.display = isOpen ? 'flex' : 'none'; } sidePanelContainer.appendChild(sidePanel); sidePanelContainer.appendChild(content); container.appendChild(sidePanelContainer); return container; } // Footer Example function createFooterExample() { let isOpen = true; const container = document.createElement('div'); container.style.height = '100%'; container.style.position = 'relative'; const sidePanelContainer = document.createElement('div'); sidePanelContainer.style.display = 'flex'; sidePanelContainer.style.height = '100%'; const sidePanel = document.createElement('div'); sidePanel.style.width = '320px'; sidePanel.style.height = '100%'; sidePanel.style.backgroundColor = 'white'; sidePanel.style.borderRight = '1px solid #e1e3ea'; sidePanel.style.display = isOpen ? 'flex' : 'none'; sidePanel.style.flexDirection = 'column'; const header = document.createElement('div'); header.style.padding = '16px'; header.style.borderBottom = '1px solid #e1e3ea'; header.style.display = 'flex'; header.style.alignItems = 'center'; header.style.justifyContent = 'space-between'; const title = document.createElement('h3'); title.textContent = 'More filters'; title.style.margin = '0'; title.style.fontSize = '18px'; title.style.fontWeight = '600'; const closeButton = document.createElement('button'); closeButton.innerHTML = '×'; closeButton.style.background = 'none'; closeButton.style.border = 'none'; closeButton.style.fontSize = '20px'; closeButton.style.cursor = 'pointer'; closeButton.style.padding = '4px 8px'; closeButton.style.borderRadius = '4px'; closeButton.onclick = () => togglePanel(); header.appendChild(title); header.appendChild(closeButton); const body = document.createElement('div'); body.style.padding = '16px'; body.style.flex = '1'; body.textContent = 'Side Panel content goes here.'; const footer = document.createElement('div'); footer.style.padding = '16px'; footer.style.borderTop = '1px solid #e1e3ea'; footer.style.display = 'flex'; footer.style.gap = '8px'; const applyButton = document.createElement('button'); applyButton.textContent = 'Apply'; applyButton.style.padding = '8px 16px'; applyButton.style.backgroundColor = '#0263e0'; applyButton.style.color = 'white'; applyButton.style.border = 'none'; applyButton.style.borderRadius = '4px'; applyButton.style.cursor = 'pointer'; const clearButton = document.createElement('button'); clearButton.textContent = 'Clear'; clearButton.style.padding = '8px 16px'; clearButton.style.backgroundColor = 'transparent'; clearButton.style.color = '#0263e0'; clearButton.style.border = '1px solid #0263e0'; clearButton.style.borderRadius = '4px'; clearButton.style.cursor = 'pointer'; footer.appendChild(applyButton); footer.appendChild(clearButton); sidePanel.appendChild(header); sidePanel.appendChild(body); sidePanel.appendChild(footer); const content = document.createElement('div'); content.style.flex = '1'; content.style.padding = '16px'; content.style.backgroundColor = '#f4f4f6'; const toggleButton = document.createElement('button'); toggleButton.innerHTML = 'More filters <span style="background: #e1e3ea; padding: 2px 6px; border-radius: 12px; font-size: 12px; margin-left: 8px;">2</span>'; toggleButton.style.padding = '8px 16px'; toggleButton.style.backgroundColor = isOpen ? '#e1e3ea' : 'transparent'; toggleButton.style.color = '#0263e0'; toggleButton.style.border = '1px solid #0263e0'; toggleButton.style.borderRadius = '20px'; toggleButton.style.cursor = 'pointer'; toggleButton.style.display = 'flex'; toggleButton.style.alignItems = 'center'; toggleButton.onclick = () => togglePanel(); content.appendChild(toggleButton); function togglePanel() { isOpen = !isOpen; sidePanel.style.display = isOpen ? 'flex' : 'none'; toggleButton.style.backgroundColor = isOpen ? '#e1e3ea' : 'transparent'; } sidePanelContainer.appendChild(sidePanel); sidePanelContainer.appendChild(content); container.appendChild(sidePanelContainer); return container; } // I18n Example function createI18nExample() { let isOpen = true; const container = document.createElement('div'); container.style.height = '100%'; container.style.position = 'relative'; const sidePanelContainer = document.createElement('div'); sidePanelContainer.style.display = 'flex'; sidePanelContainer.style.height = '100%'; const sidePanel = document.createElement('div'); sidePanel.style.width = '320px'; sidePanel.style.height = '100%'; sidePanel.style.backgroundColor = 'white'; sidePanel.style.borderRight = '1px solid #e1e3ea'; sidePanel.style.display = isOpen ? 'flex' : 'none'; sidePanel.style.flexDirection = 'column'; const header = document.createElement('div'); header.style.padding = '16px'; header.style.borderBottom = '1px solid #e1e3ea'; header.style.display = 'flex'; header.style.alignItems = 'center'; header.style.justifyContent = 'space-between'; const title = document.createElement('h3'); title.textContent = 'Título'; title.style.margin = '0'; title.style.fontSize = '18px'; title.style.fontWeight = '600'; const closeButton = document.createElement('button'); closeButton.innerHTML = '×'; closeButton.style.background = 'none'; closeButton.style.border = 'none'; closeButton.style.fontSize = '20px'; closeButton.style.cursor = 'pointer'; closeButton.style.padding = '4px 8px'; closeButton.style.borderRadius = '4px'; closeButton.title = 'cerrar panel lateral'; closeButton.onclick = () => togglePanel(); header.appendChild(title); header.appendChild(closeButton); const body = document.createElement('div'); body.style.padding = '16px'; body.style.flex = '1'; body.textContent = 'El contenido del panel lateral va aquí.'; sidePanel.appendChild(header); sidePanel.appendChild(body); const content = document.createElement('div'); content.style.flex = '1'; content.style.padding = '16px'; content.style.backgroundColor = '#f4f4f6'; const toggleButton = document.createElement('button'); toggleButton.textContent = 'Probar Panel Lateral'; toggleButton.style.padding = '8px 16px'; toggleButton.style.backgroundColor = '#0263e0'; toggleButton.style.color = 'white'; toggleButton.style.border = 'none'; toggleButton.style.borderRadius = '4px'; toggleButton.style.cursor = 'pointer'; toggleButton.title = 'abrir panel lateral'; toggleButton.onclick = () => togglePanel(); content.appendChild(toggleButton); function togglePanel() { isOpen = !isOpen; sidePanel.style.display = isOpen ? 'flex' : 'none'; } sidePanelContainer.appendChild(sidePanel); sidePanelContainer.appendChild(content); container.appendChild(sidePanelContainer); return container; } // Hook Example function createHookExample() { let isOpen = false; const container = document.createElement('div'); container.style.height = '100%'; container.style.position = 'relative'; const sidePanelContainer = document.createElement('div'); sidePanelContainer.style.display = 'flex'; sidePanelContainer.style.height = '100%'; const content = document.createElement('div'); content.style.flex = '1'; content.style.padding = '16px'; content.style.backgroundColor = '#f4f4f6'; const toggleButton = document.createElement('button'); toggleButton.textContent = 'Toggle Side Panel'; toggleButton.style.padding = '8px 16px'; toggleButton.style.backgroundColor = '#0263e0'; toggleButton.style.color = 'white'; toggleButton.style.border = 'none'; toggleButton.style.borderRadius = '4px'; toggleButton.style.cursor = 'pointer'; toggleButton.onclick = () => togglePanel(); content.appendChild(toggleButton); const sidePanel = document.createElement('div'); sidePanel.style.width = '320px'; sidePanel.style.height = '100%'; sidePanel.style.backgroundColor = 'white'; sidePanel.style.borderLeft = '1px solid #e1e3ea'; sidePanel.style.display = isOpen ? 'flex' : 'none'; sidePanel.style.flexDirection = 'column'; const header = document.createElement('div'); header.style.padding = '16px'; header.style.borderBottom = '1px solid #e1e3ea'; header.style.display = 'flex'; header.style.alignItems = 'center'; header.style.justifyContent = 'space-between'; const title = document.createElement('h3'); title.textContent = 'Assistant'; title.style.margin = '0'; title.style.fontSize = '18px'; title.style.fontWeight = '600'; const closeButton = document.createElement('button'); closeButton.innerHTML = '×'; closeButton.style.background = 'none'; closeButton.style.border = 'none'; closeButton.style.fontSize = '20px'; closeButton.style.cursor = 'pointer'; closeButton.style.padding = '4px 8px'; closeButton.style.borderRadius = '4px'; closeButton.onclick = () => togglePanel(); header.appendChild(title); header.appendChild(closeButton); const separator = document.createElement('div'); separator.style.height = '1px'; separator.style.backgroundColor = '#e1e3ea'; const body = document.createElement('div'); body.style.padding = '16px'; body.style.flex = '1'; body.textContent = 'Side Panel content goes here.'; sidePanel.appendChild(header); sidePanel.appendChild(separator); sidePanel.appendChild(body); function togglePanel() { isOpen = !isOpen; sidePanel.style.display = isOpen ? 'flex' : 'none'; } sidePanelContainer.appendChild(content); sidePanelContainer.appendChild(sidePanel); container.appendChild(sidePanelContainer); return container; } // Mount examples document.getElementById('basic-example').appendChild(createBasicExample()); document.getElementById('footer-example').appendChild(createFooterExample()); document.getElementById('i18n-example').appendChild(createI18nExample()); document.getElementById('hook-example').appendChild(createHookExample()); }, 1000); </script></body></html>' width="100%" height="1400" frameborder="0" sandbox="allow-scripts allow-same-origin allow-popups">