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
<p class="mb-4"> Tokens may be used for data input to quickly add and remove items to a list of related attributes. For example, defining a list of GitHub users who can access a private repo. </p> <h2 class="h2 mb-3">Anatomy</h2> <div class="d-flex flex-column flex-lg-row mb-4" style="gap: 16px;"> <img class="anatomy-diagram" alt="token anatomy diagram" src="https://user-images.githubusercontent.com/2313998/137778682-ee35f8e0-72de-4a24-b1bd-e4ea02e2ac49.png" /> <ul class="mt-0"> <li class="mt-0"> <strong>Leading visual</strong> (optional): Provides additional context (e.g.: user avatar) </li> <li> <strong>Label</strong> (required): Concise text label </li> <li> <strong>Remove button</strong> (optional): Removes the token from an editable group of tokens </li> </ul> </div> <h2 class="h2 mb-3">Examples</h2> <div class="example-section"> <h3 class="h3 mb-2">Basic Tokens</h3> <div class="token-group mb-3"> <span class="token">JavaScript</span> <span class="token">React</span> <span class="token">TypeScript</span> <span class="token">Node.js</span> </div> </div> <div class="example-section"> <h3 class="h3 mb-2">Interactive Tokens with Remove</h3> <div class="token-group mb-3"> <span class="token"> <span>bug</span> <button class="token-remove" aria-label="Remove bug token" onclick="this.parentElement.remove()"> <svg width="12" height="12" 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.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734L9.06 8l3.22 3.22a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L8 9.06l-3.22 3.22a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L6.94 8 3.72 4.78a.75.75 0 0 1 0-1.06Z"></path> </svg> </button> </span> <span class="token"> <span>enhancement</span> <button class="token-remove" aria-label="Remove enhancement token" onclick="this.parentElement.remove()"> <svg width="12" height="12" 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.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734L9.06 8l3.22 3.22a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L8 9.06l-3.22 3.22a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L6.94 8 3.72 4.78a.75.75 0 0 1 0-1.06Z"></path> </svg> </button> </span> <span class="token"> <span>documentation</span> <button class="token-remove" aria-label="Remove documentation token" onclick="this.parentElement.remove()"> <svg width="12" height="12" 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.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734L9.06 8l3.22 3.22a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L8 9.06l-3.22 3.22a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L6.94 8 3.72 4.78a.75.75 0 0 1 0-1.06Z"></path> </svg> </button> </span> </div> </div> <div class="example-section"> <h3 class="h3 mb-2">Tokens with Leading Visuals</h3> <div class="token-group mb-3"> <span class="token user-token"> <img class="token-leading-visual avatar avatar-1" src="https://github.com/octocat.png" alt="octocat" width="16" height="16"> <span>octocat</span> <button class="token-remove" aria-label="Remove octocat token" onclick="this.parentElement.remove()"> <svg width="12" height="12" 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.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734L9.06 8l3.22 3.22a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L8 9.06l-3.22 3.22a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L6.94 8 3.72 4.78a.75.75 0 0 1 0-1.06Z"></path> </svg> </button> </span> <span class="token issue-label"> <svg class="token-leading-visual" width="12" height="12" viewBox="0 0 16 16" fill="currentColor"> <path d="M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"></path> <path d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0ZM1.5 8a6.5 6.5 0 1 0 13 0 6.5 6.5 0 0 0-13 0Z"></path> </svg> <span>good first issue</span> </span> </div> </div> <h2 class="h2 mb-3">Sizing</h2> <div class="d-flex flex-column flex-lg-row mb-4" style="gap: 32px;"> <img width="456" alt="tokens rendered at all sizes" src="https://user-images.githubusercontent.com/2313998/137771748-ee4d796a-7bf0-4384-bb75-a239f358ede6.png" /> <div> <p class="mt-0"> Different token sizes can be used to maintain visual harmony with the other content on the screen or to maintain a comfortable touch target for interactive tokens. </p> <p> Keep visual hierarchy in mind. Large tokens should not visually compete with elements that have a higher priority. </p> <p>A group of tokens should not have tokens of different sizes.</p> </div> </div> <div class="example-section"> <h3 class="h3 mb-2">Token Sizes</h3> <div class="size-demo"> <div class="token-group"> <span class="token token-small">Small</span> <span class="token token-small">Token</span> <span class="token token-small">Size</span> </div> <div class="token-group"> <span class="token">Default</span> <span class="token">Token</span> <span class="token">Size</span> </div> <div class="token-group"> <span class="token token-large">Large</span> <span class="token token-large">Token</span> <span class="token token-large">Size</span> </div> </div> </div> <h2 class="h2 mb-3">Grouping tokens</h2> <div class="d-flex flex-column flex-lg-row mb-4" style="gap: 32px;"> <img width="456" alt="a group of tokens flowing over multiple lines" src="https://user-images.githubusercontent.com/2313998/137771744-ee968841-8b5c-437c-83cc-9f693e35e5f0.png" /> <div> <p class="mt-0"> A group of tokens should flow like words in a paragraph, not a vertical list. This keeps the group compact to improve scannability. </p> <p>Tokens that represent different types of data should not be grouped together.</p> <p>Interactive tokens should not be grouped with non-interactive tokens.</p> </div> </div> <div class="example-section"> <h3 class="h3 mb-2">Token Group with Counter</h3> <div class="token-group mb-3"> <span class="token">React</span> <span class="token">JavaScript</span> <span class="counter-token token" aria-label="3 more tokens">+3</span> </div> </div> <h2 class="h2 mb-3">Tokens as a way to enter information</h2> <div class="d-flex flex-column flex-lg-row mb-4" style="gap: 32px;"> <img width="456" alt="text input with tokens inside with an autocomplete menu below it" src="https://user-images.githubusercontent.com/2313998/137771742-0d6553f2-1d34-44c2-bfcb-f39c56b5b3d1.png" /> <div> <p class="mt-0"> If tokens are being used for data input, it should be obvious that the user is in an edit or creation context. </p> <p> Tokens can be added or removed from a group in the way that makes the most sense for your use case. We recommend using an autocomplete component to allow users to sort through a list to pick options. </p> <p> The remove button is the recommended way for removing a token from a group, but you can hide it if there is a simple alternative that makes more sense for your use case. </p> </div> </div> <div class="example-section"> <h3 class="h3 mb-2">Token Input Field</h3> <div class="token-input mb-3"> <span class="token"> <span>collaborator1</span> <button class="token-remove" aria-label="Remove collaborator1 token" onclick="this.parentElement.remove()"> <svg width="12" height="12" 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.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734L9.06 8l3.22 3.22a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L8 9.06l-3.22 3.22a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L6.94 8 3.72 4.78a.75.75 0 0 1 0-1.06Z"></path> </svg> </button> </span> <span class="token"> <span>collaborator2</span> <button class="token-remove" aria-label="Remove collaborator2 token" onclick="this.parentElement.remove()"> <svg width="12" height="12" 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.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734L9.06 8l3.22 3.22a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L8 9.06l-3.22 3.22a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L6.94 8 3.72 4.78a.75.75 0 0 1 0-1.06Z"></path> </svg> </button> </span> <input type="text" placeholder="Add collaborators..." /> </div> </div> <h2 class="h2 mb-3">Accessibility</h2> <p class="mb-3"> To make tokens accessible to keyboard users and those who require accessible contrasts, make sure to fulfill the requirements below: </p> <ul class="mb-4"> <li><code>4.5:1</code> contrast between the label (text and icon) of the token and its background</li> <li>When in focus a token must have a visible focus outline</li> <li>If a token can be removed, the keyboard focus must be moved to the previous token after deletion</li> <li>If a close button is used, its name should use the token's label to make it unique</li> </ul> <h2 class="h2 mb-3">Related links</h2> <ul> <li><a href="/components/label/">Label</a></li> </ul> <script> // Add keyboard support for token removal document.addEventListener("keydown", function(event) { if (event.target.classList.contains("token") && (event.key === "Backspace" || event.key === "Delete")) { const token = event.target; const prevToken = token.previousElementSibling; const nextToken = token.nextElementSibling; token.remove(); if (prevToken && prevToken.classList.contains("token")) { prevToken.focus(); } else if (nextToken && nextToken.classList.contains("token")) { nextToken.focus(); } } }); // Make tokens focusable document.querySelectorAll(".token").forEach(token => { if (!token.hasAttribute("tabindex")) { token.setAttribute("tabindex", "0"); } }); </script></body></html>' width="100%" height="1200" frameborder="0" sandbox="allow-scripts allow-same-origin allow-popups">