Layr
⌘K
Ctrl K
Design Systems
AI Designer
Account
Roadmap
Sign in
Getting started
Github Primer
Primer UI
Pro
Components
Action Bar
Action List
Action Menu
Anchored Overlay
Autocomplete
Avatar
Avatar Pair
Avatar Stack
Banner
Blankslate
Border Box
Box
Branch Name
Breadcrumbs
Button
Button Group
Button Marketing
Checkbox
Checkbox Group
Circle Badge
Circle Octicon
Clipboard Copy
Clipboard Copy Button
Close Button
Comment Box
Counter Label
Data Table
Details
Dialog
Form Control
Header
Heading
Hidden Text Expander
Icon
Icon Button
Image
Inline Message
Label
Label Group
Layout
Link
Markdown
Nav List
Octicon Symbols
Overlay
Page Header
Page Layout
Pagehead
Pagination
Pointer Box
Popover
Progress Bar
Radio
Radio Group
Relative Time
Segmented Control
Select
Selectpanel
Skeleton Avatar
Skeleton Box
Skeleton Text
Spinner
Split Page Layout
Stack
State Label
Subnav
Tab Container
Tab Nav
Tab Panels
Text
Text Input
Text Input With Tokens
Textarea
Timeline
Timeline Item
Toggle Switch
Token
Tooltip
Tree View
Truncate
Underline Nav
Underline Panels
</head><body class="p-4"> <div class="container-xl"> <!-- Header --> <div class="mb-4"> <h1 class="h1-mktg mb-2">Dialog</h1> <p class="f3 color-fg-muted mb-3"> Dialog is a floating surface used to display transient content such as confirmation actions, selection options, and more. </p> <div class="d-flex gap-3 mb-4"> <a href="https://primer.style/view-components/components/alpha/dialog" class="btn btn-outline">Rails Documentation</a> <a href="#accessibility" class="btn btn-outline">Accessibility</a> </div> </div> <!-- Introduction --> <div class="mb-6"> <p class="f4"> Dialogs can streamline the interface by allowing extra content to be disclosed as needed. Dialogs create a new modality to the user, and can expedite the completion of individual tasks. </p> </div> <!-- Anatomy Section --> <div class="demo-section"> <h2 class="h2 mb-3">Anatomy</h2> <img src="https://user-images.githubusercontent.com/18661030/185509649-50791e2f-0a4c-44d9-8b2b-e34b3f394315.png" alt="Anatomy of a Dialog" class="anatomy-image"> <p class="image-caption">Anatomy of a Dialog.</p> <h3 class="h3 mt-5 mb-3">Header region</h3> <p class="mb-3"> The <strong>header</strong> region provides context for the Dialog. By default, the region supports a title, description, and a close button. Titles and descriptions may wrap to multiple lines if necessary. </p> <div class="image-grid"> <div class="image-item"> <img src="https://user-images.githubusercontent.com/293280/175849372-a9d33d3b-96f3-497e-bad6-70df4d91072a.png" alt="Header with default title"> <p class="image-caption">Header with the default title variant.</p> </div> <div class="image-item"> <img src="https://user-images.githubusercontent.com/293280/175849374-6a71d8a0-da61-4745-a059-4560d053089b.png" alt="Header with large title"> <p class="image-caption">Header with large title variant.</p> </div> </div> <h3 class="h3 mt-5 mb-3">Body region</h3> <p class="mb-3"> The body region is the main content of the dialog. It can contain any content that is relevant to the task at hand. The body region is scrollable if the content exceeds the height of the dialog. </p> <h3 class="h3 mt-5 mb-3">Footer region</h3> <p class="mb-3"> The footer region may be used to show confirmation actions, navigation links, or specialized actions. Primary actions should be aligned to the right of the footer, and grouped by additional related actions. </p> </div> <!-- Interactive Demo --> <div class="demo-section"> <h2 class="h2 mb-3">Interactive Examples</h2> <h3 class="h3 mb-3">Dialog Sizes</h3> <div class="demo-buttons"> <button class="btn btn-primary" onclick="openDialog('small')">Small Dialog</button> <button class="btn btn-primary" onclick="openDialog('medium')">Medium Dialog</button> <button class="btn btn-primary" onclick="openDialog('medium-portrait')">Medium Portrait</button> <button class="btn btn-primary" onclick="openDialog('large')">Large Dialog</button> <button class="btn btn-primary" onclick="openDialog('xlarge')">Extra Large Dialog</button> </div> <h3 class="h3 mb-3 mt-5">Side Sheets</h3> <div class="demo-buttons"> <button class="btn btn-outline" onclick="openSideSheet('left')">Left Side Sheet</button> <button class="btn btn-outline" onclick="openSideSheet('right')">Right Side Sheet</button> </div> <h3 class="h3 mb-3 mt-5">Special Dialogs</h3> <div class="demo-buttons"> <button class="btn btn-outline" onclick="openDialog('confirmation')">Confirmation Dialog</button> <button class="btn btn-outline" onclick="openDialog('form')">Form Dialog</button> <button class="btn btn-outline" onclick="openDialog('command-palette')">Command Palette</button> </div> </div> <!-- Usage Guidelines --> <div class="demo-section"> <h2 class="h2 mb-3">Usage Guidelines</h2> <h3 class="h3 mb-3">Keep content simple</h3> <p class="mb-3"> Dialogs are meant to be interacted with in a single context. Avoid creating a whole page inside a dialog. Prefer single-column layouts that convey a clear goal from the moment the dialog is opened. </p> <div class="do-dont-container"> <div class="do-item"> <img src="https://user-images.githubusercontent.com/18661030/185224257-a40112ff-aaf3-4947-acf0-6b4020e023df.png" alt="Single column layout example"> <p class="image-caption">Prefer a single column layout.</p> </div> <div class="dont-item"> <img src="https://user-images.githubusercontent.com/18661030/185224316-0680b89a-8514-4336-9147-64aac722cd9a.png" alt="Side navigation example"> <p class="image-caption">Avoid side navigation within a Dialog.</p> </div> </div> </div> <!-- Accessibility Section --> <div class="demo-section" id="accessibility"> <h2 class="h2 mb-3">Accessibility and usability expectations</h2> <div class="Box p-4 mb-4"> <h3 class="h4 mb-2">Key Requirements:</h3> <ul class="mb-0"> <li>Modal dialogs must be clearly announced as dialogs by screen readers</li> <li>Focus must be programmatically moved into the dialog when opened</li> <li>Focus must remain trapped within the dialog</li> <li>Pressing Esc must dismiss the dialog</li> <li>When closed, focus returns to the trigger element</li> <li>The underlying page must be hidden from screen readers</li> </ul> </div> </div> </div> <!-- Dialog Overlays --> <div id="dialog-overlay" class="dialog-overlay" onclick="closeDialog(event)"> <div id="dialog" class="dialog" role="dialog" aria-modal="true" aria-labelledby="dialog-title"> <div class="dialog-header"> <div> <h1 id="dialog-title" class="dialog-title">Dialog Title</h1> <p id="dialog-description" class="dialog-description">Dialog description goes here.</p> </div> <button class="dialog-close" onclick="closeDialog()" aria-label="Close dialog"> <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor"> <path d="M3.72 3.72a.75.75 0 0 1 1.06 0L8 6.94l3.22-3.22a.75.75 0 1 1 1.06 1.06L9.06 8l3.22 3.22a.75.75 0 1 1-1.06 1.06L8 9.06l-3.22 3.22a.75.75 0 0 1-1.06-1.06L6.94 8 3.72 4.78a.75.75 0 0 1 0-1.06Z"></path> </svg> </button> </div> <div id="dialog-subheader" class="dialog-subheader" style="display: none;"> <input type="text" class="form-control" placeholder="Search..."> </div> <div id="dialog-body" class="dialog-body"> <p>This is the dialog body content. It can contain any HTML content and will scroll if it exceeds the dialog height.</p> </div> <div id="dialog-footer" class="dialog-footer"> <div class="dialog-footer-secondary"> <button class="btn btn-invisible">Secondary Action</button> </div> <div class="dialog-footer-actions"> <button class="btn" onclick="closeDialog()">Cancel</button> <button class="btn btn-primary">Confirm</button> </div> </div> </div> </div> <!-- Side Sheet --> <div id="side-sheet-overlay" class="dialog-overlay" onclick="closeSideSheet(event)"> <div id="side-sheet" class="side-sheet" role="dialog" aria-modal="true" aria-labelledby="side-sheet-title"> <div class="dialog-header"> <div> <h1 id="side-sheet-title" class="dialog-title">Side Sheet</h1> <p class="dialog-description">This is a side sheet example.</p> </div> <button class="dialog-close" onclick="closeSideSheet()" aria-label="Close side sheet"> <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor"> <path d="M3.72 3.72a.75.75 0 0 1 1.06 0L8 6.94l3.22-3.22a.75.75 0 1 1 1.06 1.06L9.06 8l3.22 3.22a.75.75 0 1 1-1.06 1.06L8 9.06l-3.22 3.22a.75.75 0 0 1-1.06-1.06L6.94 8 3.72 4.78a.75.75 0 0 1 0-1.06Z"></path> </svg> </button> </div> <div class="dialog-body"> <p>Side sheet content goes here. This can be used for navigation, quick actions, or previews.</p> <ul class="list-style-none"> <li class="p-2 border-bottom"><a href="#" class="d-block">Navigation Item 1</a></li> <li class="p-2 border-bottom"><a href="#" class="d-block">Navigation Item 2</a></li> <li class="p-2 border-bottom"><a href="#" class="d-block">Navigation Item 3</a></li> </ul> </div> </div> </div> <script> let currentTrigger = null; function openDialog(type) { currentTrigger = event.target; const overlay = document.getElementById('dialog-overlay'); const dialog = document.getElementById('dialog'); const title = document.getElementById('dialog-title'); const description = document.getElementById('dialog-description'); const subheader = document.getElementById('dialog-subheader'); const body = document.getElementById('dialog-body'); const footer = document.getElementById('dialog-footer'); // Reset classes dialog.className = 'dialog'; // Configure based on type switch(type) { case 'small': dialog.classList.add('dialog-small'); title.textContent = 'Small Dialog'; description.textContent = 'This is a small dialog (320px × 256px max).'; body.innerHTML = '<p>Small dialogs are used for simple confirmations or brief messages.</p>'; break; case 'medium': dialog.classList.add('dialog-medium'); title.textContent = 'Medium Dialog'; description.textContent = 'This is a medium dialog (480px × 320px max).'; body.innerHTML = '<p>Medium is the default size and should be used for most tasks.</p>'; break; case 'medium-portrait': dialog.classList.add('dialog-medium-portrait'); title.textContent = 'Medium Portrait Dialog'; description.textContent = 'This is a medium portrait dialog (480px × 600px max).'; body.innerHTML = '<p>Medium portrait is suitable for longer lists of items.</p><ul>' + Array.from({length: 20}, (_, i) => `<li class="p-2 border-bottom">List item ${i + 1}</li>`).join('') + '</ul>'; break; case 'large': dialog.classList.add('dialog-large'); title.textContent = 'Large Dialog'; description.textContent = 'This is a large dialog (640px × 432px max).'; body.innerHTML = '<p>Large dialogs are suitable for content that requires more horizontal space.</p>' + '<textarea class="form-control" rows="8" placeholder="Enter your comment here..."></textarea>'; break; case 'xlarge': dialog.classList.add('dialog-xlarge'); title.textContent = 'Extra Large Dialog'; description.textContent = 'This is an extra large dialog (960px × 600px max).'; body.innerHTML = '<p>Before using an extra large dialog, consider whether the content would be more appropriate for a new page.</p>' + '<div class="d-flex gap-3"><div class="flex-1"><h4>Column 1</h4><p>Content for the first column.</p></div>' + '<div class="flex-1"><h4>Column 2</h4><p>Content for the second column.</p></div></div>'; break; case 'confirmation': dialog.classList.add('dialog-medium'); title.textContent = 'Delete Repository'; title.classList.add('dialog-title-large'); description.textContent = 'This action cannot be undone.'; body.innerHTML = '<div class="flash flash-warn mb-3"><strong>Warning:</strong> This will permanently delete the repository and all its contents.</div>' + '<p>Please type <strong>repository-name</strong> to confirm:</p>' + '<input type="text" class="form-control" placeholder="repository-name">'; footer.innerHTML = '<div class="dialog-footer-secondary"></div>' + '<div class="dialog-footer-actions">' + '<button class="btn" onclick="closeDialog()">Cancel</button>' + '<button class="btn btn-danger">Delete Repository</button></div>'; break; case 'form': dialog.classList.add('dialog-large'); title.textContent = 'Create New Issue'; description.textContent = 'Fill out the form below to create a new issue.'; body.innerHTML = '<form><div class="form-group mb-3"><label class="form-label">Title</label>' + '<input type="text" class="form-control" required></div>' + '<div class="form-group mb-3"><label class="form-label">Description</label>' + '<textarea class="form-control" rows="6"></textarea></div>' + '<div class="form-group mb-3"><label class="form-label">Labels</label>' + '<select class="form-select"><option>bug</option><option>enhancement</option><option>question</option></select></div></form>'; break; case 'command-palette': dialog.classList.add('dialog-medium-portrait'); title.textContent = 'Command Palette'; title.classList.add('visually-hidden'); subheader.style.display = 'block'; subheader.innerHTML = '<input type="text" class="form-control" placeholder="Type a command or search..." autofocus>'; body.innerHTML = '<div class="list-style-none">' + '<div class="p-2 border-bottom"><strong>Recent</strong></div>' + '<div class="p-2 border-bottom hover-bg-gray">Go to repository</div>' + '<div class="p-2 border-bottom hover-bg-gray">Create new file</div>' + '<div class="p-2 border-bottom hover-bg-gray">Open pull request</div>' + '<div class="p-2 border-bottom"><strong>Commands</strong></div>' + '<div class="p-2 border-bottom hover-bg-gray">New repository</div>' + '<div class="p-2 border-bottom hover-bg-gray">Import repository</div></div>'; footer.style.display = 'none'; break; } overlay.classList.add('show'); document.body.style.overflow = 'hidden'; // Focus management setTimeout(() => { const firstFocusable = dialog.querySelector('input[autofocus], .dialog-close'); if (firstFocusable) { firstFocusable.focus(); } }, 100); // Trap focus trapFocus(dialog); } function closeDialog(event) { if (event && event.target !== event.currentTarget) return; const overlay = document.getElementById('dialog-overlay'); const subheader = document.getElementById('dialog-subheader'); const footer = document.getElementById('dialog-footer'); const title = document.getElementById('dialog-title'); overlay.classList.remove('show'); document.body.style.overflow = ''; // Reset dialog state subheader.style.display = 'none'; footer.style.display = 'flex'; title.classList.remove('visually-hidden', 'dialog-title-large'); // Return focus to trigger if (currentTrigger) { currentTrigger.focus(); currentTrigger = null; } } function openSideSheet(direction) { currentTrigger = event.target; const overlay = document.getElementById('side-sheet-overlay'); const sideSheet = document.getElementById('side-sheet'); const title = document.getElementById('side-sheet-title'); sideSheet.className = `side-sheet ${direction}`; title.textContent = direction === 'left' ? 'Navigation' : 'Quick Actions'; overlay.classList.add('show'); setTimeout(() => sideSheet.classList.add('show'), 10); document.body.style.overflow = 'hidden'; // Focus management setTimeout(() => { const closeButton = sideSheet.querySelector('.dialog-close'); if (closeButton) closeButton.focus(); }, 100); trapFocus(sideSheet); } function closeSideSheet(event) { if (event && event.target !== event.currentTarget) return; const overlay = document.getElementById('side-sheet-overlay'); const sideSheet = document.getElementById('side-sheet'); sideSheet.classList.remove('show'); setTimeout(() => { overlay.classList.remove('show'); document.body.style.overflow = ''; }, 200); // Return focus to trigger if (currentTrigger) { currentTrigger.focus(); currentTrigger = null; } } function trapFocus(element) { const focusableElements = element.querySelectorAll( 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])' ); const firstFocusable = focusableElements[0]; const lastFocusable = focusableElements[focusableElements.length - 1]; function handleTabKey(e) { if (e.key === 'Tab') { if (e.shiftKey) { if (document.activeElement === firstFocusable) { lastFocusable.focus(); e.preventDefault(); } } else { if (document.activeElement === lastFocusable) { firstFocusable.focus(); e.preventDefault(); } } } } element.addEventListener('keydown', handleTabKey); } // Global keyboard event handler document.addEventListener('keydown', function(e) { if (e.key === 'Escape') { const dialogOverlay = document.getElementById('dialog-overlay'); const sideSheetOverlay = document.getElementById('side-sheet-overlay'); if (dialogOverlay.classList.contains('show')) { closeDialog(); } else if (sideSheetOverlay.classList.contains('show')) { closeSideSheet(); } } }); </script></body></html>' width="100%" height="1200" frameborder="0" sandbox="allow-scripts allow-same-origin allow-popups">