Skip to content
Primer/Interface guidelines
What's new
Design
Interface guidelinesOcticonsPresentationsCommand lineMobileDesktop
Build
CSSReactReact BrandViewComponents
ContributeAbout
  • Foundations
    • Introduction
    • The Zen of GitHub
    • Content
    • Color
    • Responsive
    • Layout
    • Typography
  • Accessibility
    • Accessibility at GitHub
    • Guidelines
    • Tools
    • Alternative text for images
    • Assistive technology announcements
    • Descriptive buttons
    • Focus management
    • Headings
    • Links
    • Semantic HTML
    • Text resize and respacing
    • Tooltip alternatives
    • Truncation
  • UI patterns
    • Button usage
    • Dates and times
    • Empty states
    • Feature onboarding
    • Forms
    • Messaging
    • Progressive disclosure
    • Saving
  • Components
    • Action bar
    • Action list
    • Action menu
    • Anchored overlay
    • Autocomplete
    • Avatar
    • Avatar pair
    • Avatar stack
    • Box
    • Branch name
    • Breadcrumb
    • Checkbox
    • Checkbox group
    • Comment box
    • Counter label
    • Data table
    • Details
    • Dialog
    • Filter input
    • Icon
    • Segmented control
    • Toggle switch
    • Tokens
    • Tree view
  • Design tools
    • Figma
  • GitHub
On this page
  • Usage
  • Accessibility

Counter label

A button with a numbered label accompanied by text.
  • React
  • Rails
  • Figma
On this page
  • Usage
  • Accessibility

Usage

Use counter label to add a count to navigational elements and buttons.

A image showing two examples of buttons with counters

Accessibility

Always use counter label with adjacent text that provides supplementary information regarding what the count is for. For instance, Counter should be accompanied with text such as issues or pull requests.

Edit this page on GitHub
1 contributoremilybrick
Last edited by emilybrick on December 13, 2022