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
<li>Use a tooltip with a text label for the button so users can hover or focus the button to read a button label that makes it clear what the button does.</li> </ul> </div> </div> <!-- Options Section --> <div class="component-section"> <h2 class="h2 mb-3">Options</h2> <p class="f4 mb-3">Icon buttons have the same size and variant options as a button with a text label.</p> <h3 class="h4 mb-2">Sizes</h3> <div class="example-grid mb-4"> <div class="example-item"> <div class="tooltip-demo"> <button class="btn btn-sm" aria-label="Small search button"> <svg class="octicon" width="12" height="12" viewBox="0 0 16 16" fill="currentColor"> <path d="M10.68 11.74a6 6 0 01-7.922-8.982 6 6 0 018.982 7.922l3.04 3.04a.749.749 0 01-.326 1.275.749.749 0 01-.734-.215ZM11.5 7a4.499 4.499 0 10-8.997 0A4.499 4.499 0 0011.5 7Z"/> </svg> </button> <div class="tooltip">Search</div> </div> <span class="example-label">Small</span> </div> <div class="example-item"> <div class="tooltip-demo"> <button class="btn" aria-label="Default search button"> <svg class="octicon" width="16" height="16" viewBox="0 0 16 16" fill="currentColor"> <path d="M10.68 11.74a6 6 0 01-7.922-8.982 6 6 0 018.982 7.922l3.04 3.04a.749.749 0 01-.326 1.275.749.749 0 01-.734-.215ZM11.5 7a4.499 4.499 0 10-8.997 0A4.499 4.499 0 0011.5 7Z"/> </svg> </button> <div class="tooltip">Search</div> </div> <span class="example-label">Default</span> </div> <div class="example-item"> <div class="tooltip-demo"> <button class="btn btn-large" aria-label="Large search button"> <svg class="octicon" width="20" height="20" viewBox="0 0 16 16" fill="currentColor"> <path d="M10.68 11.74a6 6 0 01-7.922-8.982 6 6 0 018.982 7.922l3.04 3.04a.749.749 0 01-.326 1.275.749.749 0 01-.734-.215ZM11.5 7a4.499 4.499 0 10-8.997 0A4.499 4.499 0 0011.5 7Z"/> </svg> </button> <div class="tooltip">Search</div> </div> <span class="example-label">Large</span> </div> </div> <h3 class="h4 mb-2">Variants</h3> <div class="example-grid"> <div class="example-item"> <div class="tooltip-demo"> <button class="btn" aria-label="Default variant"> <svg class="octicon" width="16" height="16" viewBox="0 0 16 16" fill="currentColor"> <path d="M8 9a1.5 1.5 0 100-3 1.5 1.5 0 000 3zM1.5 9a1.5 1.5 0 100-3 1.5 1.5 0 000 3zm13 0a1.5 1.5 0 100-3 1.5 1.5 0 000 3z"/> </svg> </button> <div class="tooltip">More options</div> </div> <span class="example-label">Default</span> </div> <div class="example-item"> <div class="tooltip-demo"> <button class="btn btn-primary" aria-label="Primary variant"> <svg class="octicon" width="16" height="16" viewBox="0 0 16 16" fill="currentColor"> <path d="M7.47 10.78a.75.75 0 001.06 0l3.75-3.75a.75.75 0 00-1.06-1.06L8 9.19 4.78 5.97a.75.75 0 00-1.06 1.06l3.75 3.75z"/> </svg> </button> <div class="tooltip">Expand</div> </div> <span class="example-label">Primary</span> </div> <div class="example-item"> <div class="tooltip-demo"> <button class="btn btn-danger" aria-label="Danger variant"> <svg class="octicon" width="16" height="16" viewBox="0 0 16 16" fill="currentColor"> <path d="M11 1.75V3h2.25a.75.75 0 010 1.5H2.75a.75.75 0 010-1.5H5V1.75C5 .784 5.784 0 6.75 0h2.5C10.216 0 11 .784 11 1.75zM4.496 6.675a.75.75 0 10-1.492.15l.66 6.6A1.75 1.75 0 005.405 15h5.19c.9 0 1.652-.681 1.741-1.576l.66-6.6a.75.75 0 00-1.492-.149l-.66 6.6a.25.25 0 01-.249.225h-5.19a.25.25 0 01-.249-.225l-.66-6.6z"/> </svg> </button> <div class="tooltip">Delete</div> </div> <span class="example-label">Danger</span> </div> <div class="example-item"> <div class="tooltip-demo"> <button class="btn btn-invisible" aria-label="Invisible variant"> <svg class="octicon" width="16" height="16" viewBox="0 0 16 16" fill="currentColor"> <path d="M12.78 5.22a.749.749 0 0 1 0 1.06l-4.25 4.25a.749.749 0 0 1-1.06 0L3.22 6.28a.749.749 0 1 1 1.06-1.06L8 8.939l3.72-3.719a.749.749 0 0 1 1.06 0Z"/> </svg> </button> <div class="tooltip">Expand</div> </div> <span class="example-label">Invisible</span> </div> </div> </div> <!-- Accessibility Section --> <div class="component-section"> <h2 class="h2 mb-3">Accessibility and usability expectations</h2> <p class="f4 mb-3">Even though the label is visually hidden, a text label needs to be defined so a screen reader can read that label to the user. A graphical IconButton must:</p> <ol class="mb-4"> <li class="mb-2">Have an accessible name (acting as a text alternative for the Octicon) that describes the action that will be performed when the button is activated.</li> <li>Be visually recognisable as representing the action. For example, a magnifying glass icon could be used to represent a search button, with a text alternative of "Search". This allows voice control software users to activate the button by saying "click search", whereas an icon that wasn''t recognisable as representing the text alternative would leave the user guessing at the button''s accessible name, and other users guessing at its purpose.</li> </ol> <div class="accessibility-callout"> <h3 class="h4 mb-2">Built-in accessibility features</h3> <p class="mb-2">By default, this component is rendered as a regular button with a nested svg for the Octicon. The aria-label property is used as the button''s accessible name.</p> <div class="code-example"><button … aria-label="…"> <svg aria-hidden="true" …> … </svg></button> </div> <ul class="mb-0"> <li class="mb-2">When the disabled property is set, the component is rendered as a standard disabled button.</li> <li class="mb-2">When the inactive property is set, the component is rendered as button aria-disabled="true" – the control itself is visually styled to appear disabled. However, the control is still keyboard-focusable, and can still be activated.</li> <li class="mb-2">The selectable variant/scheme colors meet minimum color contrast requirements.</li> <li class="mb-2">The size variants all meet the minimum target size requirement.</li> <li>IconButton automatically has a visible tooltip that appears when the button is hovered and when it receives keyboard focus.</li> </ul> </div> </div> <!-- Implementation Requirements --> <div class="component-section"> <h2 class="h2 mb-3">Implementation requirements</h2> <h3 class="h4 mb-2">Accessible name</h3> <p class="f4 mb-3">You must provide a sufficiently descriptive aria-label for the component.</p> <h3 class="h4 mb-2">Target size</h3> <p class="f4 mb-3">The button must have a minimum target size of 24×24 CSS pixels. This is to ensure that the button is large enough to be easily activated by users with motor impairments.</p> <h3 class="h4 mb-2">Convey meaning with more than color</h3> <p class="f4 mb-3">IconButton has different schemes/variants (such as default, danger, invisible), which result in different colors for the icon, background, and borders. These differences are purely visual, so they may be difficult to distinguish for users with impaired color perception. They also won''t be perceived by screen reader users. For this reason, you can''t rely on the scheme/variant alone to give meaning to your buttons.</p> <p class="f4">Make sure to differentiate icon buttons through the use of sufficiently different Octicons, rather than their visual presentation.</p> </div> <!-- Testing Section --> <div class="component-section"> <h2 class="h2 mb-3">How to test the component</h2> <h3 class="h4 mb-2">Integration tests</h3> <ul class="mb-3"> <li class="mb-1">The button has a sufficiently descriptive accessible name</li> <li class="mb-1">The button uses an icon with sufficiently clear meaning that conveys its action</li> <li>If the button uses a schema/variant for a particular presentation, the button does not solely rely on this visual aspect to convey its purpose, or to differentiate it from other buttons</li> </ul> <h3 class="h4 mb-2">Component tests</h3> <ul class="mb-0"> <li class="mb-1">The aria-label added to the component is output as the button''s aria-label</li> <li class="mb-1">Unless the button is disabled, it can be focused and activated using the keyboard</li> <li class="mb-1">If the button is set to be inactive, it still receives keyboard focus, but it conveys its inactive/disabled state to screen readers with the aria-disabled="true" attribute</li> <li class="mb-1">The button has a minimum target size of 24×24 CSS pixels, regardless of content</li> <li>The tooltip for the button can be hovered with the mouse, and the tooltip can be dismissed using Esc without needing to move the mouse or focus away from the button</li> </ul> </div> <!-- Related Links --> <div class="component-section"> <h2 class="h2 mb-3">Related links</h2> <ul class="mb-0"> <li class="mb-1"><a href="#" class="Link">Button usage</a></li> <li><a href="#" class="Link">Button</a></li> </ul> </div> <!-- Footer --> <div class="mt-6 pt-4 border-top color-border-muted"> <h2 class="h4 mb-2">Feedback</h2> <p class="color-fg-muted">Help us improve this component by providing feedback, asking questions on Slack, or updating this file on GitHub.</p> </div> </div> <script> // Add keyboard support for tooltips document.addEventListener("DOMContentLoaded", function() { const tooltipButtons = document.querySelectorAll(".tooltip-demo button"); tooltipButtons.forEach(button => { const tooltip = button.parentElement.querySelector(".tooltip"); button.addEventListener("focus", () => { tooltip.style.opacity = "1"; tooltip.style.visibility = "visible"; }); button.addEventListener("blur", () => { tooltip.style.opacity = "0"; tooltip.style.visibility = "hidden"; }); button.addEventListener("keydown", (e) => { if (e.key === "Escape") { tooltip.style.opacity = "0"; tooltip.style.visibility = "hidden"; } }); }); }); </script></body></html>' width="100%" height="2400" frameborder="0" sandbox="allow-scripts allow-same-origin allow-popups">