Layr
⌘K
Ctrl K
Design Systems
AI Designer
Account
Roadmap
Sign in
Twilio Paste - pagination
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
<div id="do-dont-section"></div> </div> <script> document.addEventListener("DOMContentLoaded", function() { const { Pagination, PaginationItems, PaginationArrow, PaginationLabel, PaginationNumbers, PaginationNumber, PaginationEllipsis, Anchor, Box, Text, Heading, Paragraph, Button, Table, THead, TBody, Th, Td, Tr, Stack, Callout, CalloutHeading, CalloutText, Blockquote, BlockquoteContent, BlockquoteCitation } = window.TwilioPaste; // Header document.getElementById("header").innerHTML = ` <h1>Pagination</h1> <p>Pagination lets users navigate through content or a dataset that has been broken up into multiple pages.</p> <p> <a href="https://github.com/twilio-labs/paste/tree/main/packages/paste-core/components/pagination" target="_blank">Source code</a> | <a href="https://paste.twilio.design/components/pagination" target="_blank">Usage guidelines</a> | <a href="https://paste.twilio.design/components/pagination/#accessibility" target="_blank">Accessibility</a> </p> `; // Main Example document.getElementById("main-example").innerHTML = ` <div data-paste-element="PAGINATION" role="navigation" aria-label="truncated pagination navigation"> <div data-paste-element="PAGINATION_ITEMS"> <button data-paste-element="PAGINATION_ARROW" aria-label="Go to previous page" type="button"> <svg aria-hidden="true" width="20" height="20" viewBox="0 0 20 20" fill="currentColor"> <path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd"/> </svg> </button> <div data-paste-element="PAGINATION_NUMBERS"> <button data-paste-element="PAGINATION_NUMBER" aria-label="Go to page 1">1</button> <span data-paste-element="PAGINATION_ELLIPSIS" aria-label="Collapsed previous pages">…</span> <button data-paste-element="PAGINATION_NUMBER" aria-label="Go to page 4">4</button> <button data-paste-element="PAGINATION_NUMBER" aria-label="Go to page 5" aria-current="page" style="background-color: #0263E0; color: white;">5</button> <button data-paste-element="PAGINATION_NUMBER" aria-label="Go to page 6">6</button> <span data-paste-element="PAGINATION_ELLIPSIS" aria-label="Collapsed next pages">…</span> <button data-paste-element="PAGINATION_NUMBER" aria-label="Go to page 9">9</button> </div> <button data-paste-element="PAGINATION_ARROW" aria-label="Go to next page" type="button"> <svg aria-hidden="true" width="20" height="20" viewBox="0 0 20 20" fill="currentColor"> <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"/> </svg> </button> </div> </div> `; // Guidelines document.getElementById("guidelines").innerHTML = ` <h2>Guidelines</h2> <h3>About Pagination</h3> <p>Use Pagination to split up content when a user's goal is "to find a specific item [in a list] and click through to that destination page". Pagination is used to communicate only where a user is in paged content. It isn't used to show the status of each page—use Progress Steps instead.</p> <p>Pagination is often paired with Tables, one of the most commonly used components in Twilio and one of the primary ways customers view content in our products. Think of Pagination as an important navigation element that helps our customers understand exactly where they are and help them decide where to go next.</p> <p>The component is made up of 6 main parts:</p> <ul> <li><strong>Pagination:</strong> The outer pagination container with the accessible role=navigation</li> <li><strong>PaginationItems:</strong> A wrapper that displays the pagination contents inline</li> <li><strong>PaginationArrow:</strong> Left and right arrow controls, with an option to add text labels</li> <li><strong>PaginationLabel:</strong> Indicates the current page in view (e.g., "Page 2", "1–10 of 50 results")</li> <li><strong>PaginationNumbers:</strong> A wrapper for the list of page numbers and the total page count</li> <li><strong>PaginationNumber:</strong> Page number controls</li> </ul> <h3>Accessibility Information</h3> <ul> <li>The Pagination component supports navigation by the use of either a button or anchor. Use Pagination as an anchor if the URL changes for each page. Use it as a button if the URL doesn't change for each page.</li> <li>Use the Pagination component when it controls a large part of the page in view, like a full-width Table. Since Pagination typically appears underneath the UI element it's controlling, it needs to be obvious that it is controlling the element above it.</li> </ul> `; // Default Examples document.getElementById("default-examples").innerHTML = ` <p>Use the default Pagination component for paged datasets like event logs, where the dataset is constantly increasing in size, or where the total number of pages is unknown.</p> <div style="margin: 1rem 0;"> <div data-paste-element="PAGINATION" role="navigation" aria-label="labelled pagination navigation"> <div data-paste-element="PAGINATION_ITEMS"> <button data-paste-element="PAGINATION_ARROW" aria-label="Go to previous page" type="button"> <svg aria-hidden="true" width="20" height="20" viewBox="0 0 20 20" fill="currentColor"> <path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd"/> </svg> </button> <span data-paste-element="PAGINATION_LABEL">Page 2</span> <button data-paste-element="PAGINATION_ARROW" aria-label="Go to next page" type="button"> <svg aria-hidden="true" width="20" height="20" viewBox="0 0 20 20" fill="currentColor"> <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"/> </svg> </button> </div> </div> </div> `; // Anchor Examples document.getElementById("anchor-examples").innerHTML = ` <p>Use Pagination as an anchor if the URL changes for each page. Both the PaginationArrow and PaginationNumber components can be set as anchors using the as="a" prop and including an href prop.</p> <div style="margin: 1rem 0;"> <div data-paste-element="PAGINATION" role="navigation" aria-label="anchor pagination navigation"> <div data-paste-element="PAGINATION_ITEMS"> <a data-paste-element="PAGINATION_ARROW" href="#" aria-label="Go to previous page"> <svg aria-hidden="true" width="20" height="20" viewBox="0 0 20 20" fill="currentColor"> <path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd"/> </svg> </a> <span data-paste-element="PAGINATION_LABEL">Page 2</span> <a data-paste-element="PAGINATION_ARROW" href="#" aria-label="Go to next page"> <svg aria-hidden="true" width="20" height="20" viewBox="0 0 20 20" fill="currentColor"> <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"/> </svg> </a> </div> </div> </div> `; // Button Examples document.getElementById("button-examples").innerHTML = ` <p>Use Pagination as a button if the URL doesn't change for each page. Both the PaginationArrow and PaginationNumber components are buttons by default.</p> <div style="margin: 1rem 0;"> <div data-paste-element="PAGINATION" role="navigation" aria-label="button pagination navigation"> <div data-paste-element="PAGINATION_ITEMS"> <button data-paste-element="PAGINATION_ARROW" aria-label="Go to previous page" type="button"> <svg aria-hidden="true" width="20" height="20" viewBox="0 0 20 20" fill="currentColor"> <path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd"/> </svg> </button> <span data-paste-element="PAGINATION_LABEL">Page 2</span> <button data-paste-element="PAGINATION_ARROW" aria-label="Go to next page" type="button"> <svg aria-hidden="true" width="20" height="20" viewBox="0 0 20 20" fill="currentColor"> <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"/> </svg> </button> </div> </div> </div> `; // Custom Labels document.getElementById("custom-label-examples").innerHTML = ` <p>Adding labels to Pagination can help give customers more information about what kind of data is in view and in what direction the pages are moving.</p> <div style="margin: 1rem 0;"> <div data-paste-element="PAGINATION" role="navigation" aria-label="custom label pagination navigation"> <div data-paste-element="PAGINATION_ITEMS"> <button data-paste-element="PAGINATION_ARROW" aria-label="Go to previous month" type="button"> <svg aria-hidden="true" width="20" height="20" viewBox="0 0 20 20" fill="currentColor"> <path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd"/> </svg> Previous </button> <span data-paste-element="PAGINATION_LABEL">February 2021</span> <button data-paste-element="PAGINATION_ARROW" aria-label="Go to next month" type="button"> Next <svg aria-hidden="true" width="20" height="20" viewBox="0 0 20 20" fill="currentColor"> <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"/> </svg> </button> </div> </div> </div> <p style="color: #6B7280; margin-top: 1rem;">Will pressing the "Next" button take you to January or March?</p> <div style="margin: 2rem 0;"> <div data-paste-element="PAGINATION" role="navigation" aria-label="current page label pagination navigation"> <div data-paste-element="PAGINATION_ITEMS"> <button data-paste-element="PAGINATION_ARROW" aria-label="Go to newer templates" type="button"> <svg aria-hidden="true" width="20" height="20" viewBox="0 0 20 20" fill="currentColor"> <path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd"/> </svg> Newer templates </button> <span data-paste-element="PAGINATION_LABEL">51–100 of 500+ templates</span> <button data-paste-element="PAGINATION_ARROW" aria-label="Go to older templates" type="button"> Older templates <svg aria-hidden="true" width="20" height="20" viewBox="0 0 20 20" fill="currentColor"> <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"/> </svg> </button> </div> </div> </div> `; // Page Count Example document.getElementById("page-count-example").innerHTML = ` <p>Use the Pagination variant with total page count in cases when knowing the exact size of a dataset is crucial to a customer's understanding of the content and when you're able to fetch the data in a performant way.</p> <table class="sample-table"> <thead> <tr> <th>Phone Number</th> <th>Friendly Name</th> <th>SMS</th> <th>MMS</th> <th>Voice</th> </tr> </thead> <tbody> <tr> <td>+1 234 567 8901</td> <td>Main Office</td> <td>✓</td> <td>✓</td> <td>✓</td> </tr> <tr> <td>+1 234 567 8902</td> <td>Support Line</td> <td>✓</td> <td>✗</td> <td>✓</td> </tr> <tr> <td>+1 234 567 8903</td> <td>Sales Team</td> <td>✓</td> <td>✓</td> <td>✓</td> </tr> </tbody> </table> <div style="text-align: center; margin-top: 1.75rem;"> <div data-paste-element="PAGINATION" role="navigation" aria-label="phone numbers table pagination"> <div data-paste-element="PAGINATION_ITEMS"> <button data-paste-element="PAGINATION_ARROW" aria-label="Go to previous page" type="button"> <svg aria-hidden="true" width="20" height="20" viewBox="0 0 20 20" fill="currentColor"> <path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd"/> </svg> </button> <div data-paste-element="PAGINATION_NUMBERS"> <button data-paste-element="PAGINATION_NUMBER" aria-label="Go to page 1" aria-current="page" style="background-color: #0263E0; color: white;">1</button> <button data-paste-element="PAGINATION_NUMBER" aria-label="Go to page 2">2</button> <button data-paste-element="PAGINATION_NUMBER" aria-label="Go to page 3">3</button> <button data-paste-element="PAGINATION_NUMBER" aria-label="Go to page 4">4</button> <button data-paste-element="PAGINATION_NUMBER" aria-label="Go to page 5">5</button> </div> <button data-paste-element="PAGINATION_ARROW" aria-label="Go to next page" type="button"> <svg aria-hidden="true" width="20" height="20" viewBox="0 0 20 20" fill="currentColor"> <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"/> </svg> </button> </div> </div> </div> `; // Callout document.getElementById("callout-section").innerHTML = ` <div style="background-color: #EBF8FF; border: 1px solid #90CDF4; border-radius: 8px; padding: 1.5rem; margin: 2rem 0;"> <h4 style="color: #1E40AF; margin-top: 0;">Considering the tradeoffs for showing the total count of a dataset</h4> <p>By default, <a href="https://www.twilio.com/blog/replacing-absolute-paging-and-related-properties" target="_blank">Twilio APIs might not support showing current page number or the total count of a dataset</a>.</p> <p>However, anecdotal evidence from product designers suggests that knowing the size of a dataset is important to Twilio customers in certain cases. Showing the total count of a dataset makes sense especially when the customer has more active control over total count, such as with total SIMs, but not for datasets that rapidly increase, like event logs. If the exact total count is unknown, consider indicating size in another way that gives customers an approximate idea of the size of a dataset, like showing "1–10 of 100+ results".</p> </div> `; // Positioning Example document.getElementById("positioning-example").innerHTML = ` <p>The Pagination component should be centered underneath the content it controls separated by a margin of space-70.</p> <table class="sample-table"> <thead> <tr> <th>Name</th> <th>Date created</th> <th>Status</th> </tr> </thead> <tbody> <tr> <td>Template 1</td> <td>Oct 15, 2023</td> <td>Active</td> </tr> <tr> <td>Template 2</td> <td>Oct 14, 2023</td> <td>Draft</td> </tr> <tr> <td>Template 3</td> <td>Oct 13, 2023</td> <td>Active</td> </tr> </tbody> </table> <div style="text-align: center; margin-top: 1.75rem;"> <div data-paste-element="PAGINATION" role="navigation" aria-label="templates table pagination"> <div data-paste-element="PAGINATION_ITEMS"> <button data-paste-element="PAGINATION_ARROW" aria-label="Go to previous page" type="button"> <svg aria-hidden="true" width="20" height="20" viewBox="0 0 20 20" fill="currentColor"> <path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd"/> </svg> </button> <span data-paste-element="PAGINATION_LABEL">Page 2 of 5</span> <button data-paste-element="PAGINATION_ARROW" aria-label="Go to next page" type="button"> <svg aria-hidden="true" width="20" height="20" viewBox="0 0 20 20" fill="currentColor"> <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"/> </svg> </button> </div> </div> </div> `; // Ellipsis Examples document.getElementById("ellipsis-examples").innerHTML = ` <p>When the number of pages exceeds 7, PaginationEllipsis can be used to indicate there are remaining pages.</p> <div style="margin: 1rem 0;"> <div data-paste-element="PAGINATION" role="navigation" aria-label="truncated pagination navigation"> <div data-paste-element="PAGINATION_ITEMS"> <button data-paste-element="PAGINATION_ARROW" aria-label="Go to previous page" type="button"> <svg aria-hidden="true" width="20" height="20" viewBox="0 0 20 20" fill="currentColor"> <path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l </div> </div> </div> </div> </div> </div> <div class="hidden rotate-45 text-red-500 bg-red-100 dark:text-red-400 dark:bg-red-900/50 text-green-500 bg-green-100 dark:text-green-400 dark:bg-green-900/50 scheme-light scheme-dark scheme-light-dark"></div> </main> </body> </html> <script> document.addEventListener("turbo:load", function() { var alerts = document.querySelectorAll('.alert') alerts.forEach(function(alert) { new bootstrap.Alert(alert) }) }) </script> <!--popover--> <script> document.addEventListener("DOMContentLoaded", function () { const dropdowns = document.querySelectorAll('[data-controller="dropdown-popover"]'); for (let i = 0; i < dropdowns.length; i++) { const dropdown = dropdowns[i]; const button = dropdown.querySelector('[data-dropdown-popover-target="button"]'); const menu = dropdown.querySelector('[data-dropdown-popover-target="menu"]'); if (!button || !menu) continue; let open = false; // Open menu button.addEventListener("mouseenter", () => { menu.style.opacity = "1"; menu.style.marginLeft = "-140px"; menu.style.pointerEvents = "auto"; menu.style.display = "block"; open = true; }); // Close after leaving both button and menu button.addEventListener("mouseleave", () => { setTimeout(() => { if (!menu.matches(':hover')) { menu.style.opacity = "0"; menu.style.pointerEvents = "none"; menu.style.display = "none"; open = false; } }, 100); }); // Keep open while hovering over menu menu.addEventListener("mouseenter", () => { menu.style.opacity = "1"; menu.style.marginLeft = "-140px"; menu.style.pointerEvents = "auto"; menu.style.display = "block"; }); menu.addEventListener("mouseleave", () => { menu.style.opacity = "0"; menu.style.pointerEvents = "none"; menu.style.display = "none"; open = false; }); } }); </script> <!--sendJF--> <script> document.querySelectorAll('#sendFiddle').forEach((btn, index) => { btn.addEventListener('click', () => { const iframe = document.querySelectorAll('iframe')[index]; const srcdoc = iframe?.getAttribute('srcdoc'); if (!srcdoc) { alert('iframe srcdoc not available'); return; } // Extract <style> and <script> content from srcdoc using regex const cssMatches = [...srcdoc.matchAll(/<style[^>]*>([\s\S]*?)<\/style>/gi)]; const jsMatches = [...srcdoc.matchAll(/<script[^>]*>([\s\S]*?)<\/script>/gi)]; const css = cssMatches.map(m => m[1]).join('\n'); const js = jsMatches.map(m => m[1]).join('\n'); // Remove <style> and <script> blocks to isolate HTML const html = srcdoc .replace(/<style[^>]*>[\s\S]*?<\/style>/gi, '') .replace(/<script[^>]*>[\s\S]*?<\/script>/gi, '') .replace(/</g, '<') .replace(/>/g, '>') .replace(/&/g, '&'); // Create and submit form to JSFiddle const form = document.createElement('form'); form.method = 'POST'; form.action = 'https://jsfiddle.net/api/post/library/pure/'; form.target = '_blank'; const addField = (name, value) => { const input = document.createElement('input'); input.type = 'hidden'; input.name = name; input.value = value; form.appendChild(input); }; addField('html', html.trim()); addField('css', css.trim()); addField('js', js.trim()); addField('title', 'From Layr iframe srcdoc'); document.body.appendChild(form); form.submit(); document.body.removeChild(form); }); }); </script> <!--fullscreen--> <script> document.querySelectorAll('#FullscreenTab').forEach((button) => { button.addEventListener('click', function () { // Prevent duplicate fullscreen overlays if (document.getElementById('fullscreen-iframe-wrapper')) return; // Find the closest snippet container and its iframe const snippetContainer = this.closest('[data-controller="snippet"]'); const iframe = snippetContainer?.querySelector('iframe'); if (!iframe) { console.error('No iframe found for this FullscreenTab.'); return; } // Create a cloned iframe using srcdoc or fallback to content HTML const iframeClone = document.createElement('iframe'); iframeClone.className = 'w-full h-full border-0 rounded-xl bg-white dark:bg-neutral-900'; iframeClone.setAttribute('sandbox', 'allow-same-origin allow-scripts allow-forms'); iframeClone.srcdoc = iframe.srcdoc || iframe.contentDocument?.documentElement?.outerHTML; // Create overlay const overlay = document.createElement('div'); overlay.id = 'fullscreen-iframe-wrapper'; overlay.className = 'fixed inset-0 z-50 flex items-center justify-center bg-black/70 backdrop-blur-sm p-4'; // Create container for iframe and close button const container = document.createElement('div'); container.className = ' iframe_main_show relative w-full max-w-6xl h-[90vh] bg-white dark:bg-neutral-900 rounded-xl overflow-hidden shadow-2xl'; // Close button const closeBtn = document.createElement('button'); closeBtn.innerHTML = '×'; closeBtn.className = ` absolute top-3 right-3 text-white text-2xl font-bold bg-black/40 hover:bg-black/70 rounded-full w-10 h-10 flex items-center justify-center transition `; closeBtn.addEventListener('click', () => overlay.remove()); // Assemble container.appendChild(closeBtn); container.appendChild(iframeClone); overlay.appendChild(container); document.body.appendChild(overlay); }); }); </script> </body> </html>