Layr
⌘K
Ctrl K
Design Systems
AI Designer
Account
Roadmap
Sign in
Twilio Paste - keyboard-key
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>Don't implement keyboard shortcuts, especially single keys, for actions that aren't platform-level or for a canvas productivity tool.</p> </div> <div class="do-card"> <h4>Do</h4> <p>Use full words for modifier keys, such as "Command" and "Control".</p> </div> <div class="dont-card"> <h4>Don't</h4> <p>Don't use symbols like "⌘". Only use abbreviations like "Cmd" when space is limited.</p> </div> </div> </div> <script> // Wait for Twilio Paste components to load setTimeout(() => { const { KeyboardKey, KeyboardKeyGroup, Paragraph, Callout, CalloutHeading, CalloutText, Anchor, Table, THead, Tr, Th, TBody, Td, Button, Tooltip, SearchIcon, Stack, Box } = window.TwilioPaste; // Basic Example const basicExample = document.getElementById("basic-example"); if (basicExample) { basicExample.innerHTML = ` <div class="keyboard-key-group"> <span class="keyboard-key">Command</span> <span class="keyboard-key">K</span> </div> `; } // Callout Example const calloutExample = document.getElementById("callout-example"); if (calloutExample) { calloutExample.innerHTML = ` <div style="background-color: rgb(240, 249, 255); border: 1px solid rgb(59, 130, 246); border-radius: 8px; padding: 1rem; margin: 1rem 0;"> <h4 style="color: rgb(30, 64, 175); margin: 0 0 0.5rem 0;">Are you considering implementing a new keyboard shortcut?</h4> <p style="margin: 0;">Reach out to us in a <a href="https://github.com/twilio-labs/paste/discussions" target="_blank">Github Discussion</a> so we can keep keyboard shortcuts standardized across our platforms by connecting you with other teams, like Flex and Studio, who have already built them into features.</p> </div> `; } // Default Example const defaultExample = document.getElementById("default-example"); if (defaultExample) { defaultExample.innerHTML = ` <p>Press <span class="keyboard-key">Enter</span> to submit the form.</p> <p>Use <div class="keyboard-key-group"><span class="keyboard-key">Command</span><span class="keyboard-key">K</span></div> to open search.</p> `; } // Disabled Example const disabledExample = document.getElementById("disabled-example"); if (disabledExample) { disabledExample.innerHTML = ` <p>This shortcut is disabled: <div class="keyboard-key-group"><span class="keyboard-key disabled">Command</span><span class="keyboard-key disabled">S</span></div></p> `; } // Pressed Example const pressedExample = document.getElementById("pressed-example"); if (pressedExample) { pressedExample.innerHTML = ` <p>Press and hold: <div class="keyboard-key-group"><span class="keyboard-key pressed">Command</span><span class="keyboard-key">K</span></div></p> `; } // Tooltip Example const tooltipExample = document.getElementById("tooltip-example"); if (tooltipExample) { tooltipExample.innerHTML = ` <button style="padding: 0.5rem 1rem; background-color: rgb(0, 20, 137); color: white; border: none; border-radius: 4px; cursor: pointer;" title="Search (Command+K)"> 🔍 Search </button> `; } // Shortcuts Table const shortcutsTable = document.getElementById("shortcuts-table"); if (shortcutsTable) { shortcutsTable.innerHTML = ` <table style="width: 100%; border-collapse: collapse; margin: 1rem 0;"> <thead> <tr style="background-color: rgb(249, 250, 251);"> <th style="padding: 0.75rem; text-align: left; border: 1px solid rgb(202, 205, 209);">Action</th> <th style="padding: 0.75rem; text-align: left; border: 1px solid rgb(202, 205, 209);">Windows/Linux</th> <th style="padding: 0.75rem; text-align: left; border: 1px solid rgb(202, 205, 209);">Mac</th> </tr> </thead> <tbody> <tr> <td style="padding: 0.75rem; border: 1px solid rgb(202, 205, 209);">Open search</td> <td style="padding: 0.75rem; border: 1px solid rgb(202, 205, 209);"> <div class="keyboard-key-group"> <span class="keyboard-key">Control</span> <span class="keyboard-key">K</span> </div> </td> <td style="padding: 0.75rem; border: 1px solid rgb(202, 205, 209);"> <div class="keyboard-key-group"> <span class="keyboard-key">Command</span> <span class="keyboard-key">K</span> </div> </td> </tr> <tr> <td style="padding: 0.75rem; border: 1px solid rgb(202, 205, 209);">Copy to clipboard</td> <td style="padding: 0.75rem; border: 1px solid rgb(202, 205, 209);"> <div class="keyboard-key-group"> <span class="keyboard-key">Control</span> <span class="keyboard-key">C</span> </div> </td> <td style="padding: 0.75rem; border: 1px solid rgb(202, 205, 209);"> <div class="keyboard-key-group"> <span class="keyboard-key">Command</span> <span class="keyboard-key">C</span> </div> </td> </tr> <tr> <td style="padding: 0.75rem; border: 1px solid rgb(202, 205, 209);">Paste from clipboard</td> <td style="padding: 0.75rem; border: 1px solid rgb(202, 205, 209);"> <div class="keyboard-key-group"> <span class="keyboard-key">Control</span> <span class="keyboard-key">V</span> </div> </td> <td style="padding: 0.75rem; border: 1px solid rgb(202, 205, 209);"> <div class="keyboard-key-group"> <span class="keyboard-key">Command</span> <span class="keyboard-key">V</span> </div> </td> </tr> </tbody> </table> `; } }, 1000); </script></body></html>' width="100%" height="1200" frameborder="0" sandbox="allow-scripts allow-same-origin allow-popups">