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
<div class="example-demo"> <a href="#" class="branch-name"> <svg class="branch-name-icon" viewBox="0 0 16 16"> <path d="M9.5 3.25a2.25 2.25 0 1 1 3 2.122V6A2.5 2.5 0 0 1 10 8.5H6a1 1 0 0 0-1 1v1.128a2.251 2.251 0 1 1-1.5 0V5.372a2.25 2.25 0 1 1 1.5 0v1.836A2.493 2.493 0 0 1 6 7h4a1 1 0 0 0 1-1v-.628A2.25 2.25 0 0 1 9.5 3.25Zm-6 0a.75.75 0 1 0 1.5 0 .75.75 0 0 0-1.5 0Zm8.25-.75a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5ZM4.25 12a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Z"/> </svg> main </a> <a href="#" class="branch-name"> <svg class="branch-name-icon" viewBox="0 0 16 16"> <path d="M9.5 3.25a2.25 2.25 0 1 1 3 2.122V6A2.5 2.5 0 0 1 10 8.5H6a1 1 0 0 0-1 1v1.128a2.251 2.251 0 1 1-1.5 0V5.372a2.25 2.25 0 1 1 1.5 0v1.836A2.493 2.493 0 0 1 6 7h4a1 1 0 0 0 1-1v-.628A2.25 2.25 0 0 1 9.5 3.25Zm-6 0a.75.75 0 1 0 1.5 0 .75.75 0 0 0-1.5 0Zm8.25-.75a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5ZM4.25 12a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Z"/> </svg> feature/authentication </a> </div> </div> <!-- As Link vs Text --> <div class="example-section"> <h2 class="example-title">As a Link vs Plain Text</h2> <p class="example-description">Branch name is rendered as a link by default. You can also represent the branch label in plain text.</p> <div class="example-demo"> <div class="d-flex flex-column gap-3"> <div class="d-flex align-items-center gap-2"> <span class="f5 color-fg-muted">As link:</span> <a href="#" class="branch-name">main</a> </div> <div class="d-flex align-items-center gap-2"> <span class="f5 color-fg-muted">As text:</span> <span class="branch-name-text">main</span> </div> </div> </div> </div> <!-- Interactive Examples --> <div class="example-section"> <h2 class="example-title">Interactive Examples</h2> <p class="example-description">Try hovering over the branch name links to see the hover state.</p> <div class="example-demo"> <div class="d-flex flex-wrap gap-2"> <a href="#" class="branch-name">main</a> <a href="#" class="branch-name">develop</a> <a href="#" class="branch-name">feature/user-dashboard</a> <a href="#" class="branch-name"> <svg class="branch-name-icon" viewBox="0 0 16 16"> <path d="M9.5 3.25a2.25 2.25 0 1 1 3 2.122V6A2.5 2.5 0 0 1 10 8.5H6a1 1 0 0 0-1 1v1.128a2.251 2.251 0 1 1-1.5 0V5.372a2.25 2.25 0 1 1 1.5 0v1.836A2.493 2.493 0 0 1 6 7h4a1 1 0 0 0 1-1v-.628A2.25 2.25 0 0 1 9.5 3.25Zm-6 0a.75.75 0 1 0 1.5 0 .75.75 0 0 0-1.5 0Zm8.25-.75a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5ZM4.25 12a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Z"/> </svg> release/v2.1.0 </a> <span class="branch-name-text">current-branch</span> </div> </div> </div> <!-- Accessibility --> <div class="example-section"> <h2 class="example-title">Accessibility</h2> <div class="flash flash-warn mb-3"> <svg class="octicon octicon-alert mr-2" viewBox="0 0 16 16" width="16" height="16"> <path d="M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"/> </svg> <strong>Known accessibility issues:</strong> For GitHub staff, please refer to the internal accessibility documentation for known issues with this component. </div> <ul class="ml-3"> <li>Branch name links should have descriptive text or aria-labels when the branch name alone might not provide sufficient context</li> <li>When used as plain text, ensure sufficient color contrast</li> <li>Icons should have appropriate aria-hidden attributes since they are decorative</li> </ul> </div> <h2 id="feedback" class="h2 mt-6 mb-3">Feedback</h2> <p class="f4 color-fg-muted"> Help us improve this component by providing feedback, asking questions on Slack, or updating this file on GitHub. </p></body></html>' width="100%" height="1200" frameborder="0" sandbox="allow-scripts allow-same-origin allow-popups">