Skip to content
Primer Design System

Primer Design System

Counter label

Counter label is a button with a numbered label accompanied by text.

On this page

v0.22.0BetaNot reviewed for accessibility

Description

Use Counter to add a count to navigational elements and buttons.

Accessibility

Always use Counter 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.

Arguments

NameDefaultDescription
count

0

Integer, Float::INFINITY, nil

The number to be displayed (e.x. # of issues, pull requests)

scheme

:default

Symbol

Color scheme. One of :default, :primary, or :secondary.

limit

5_000

Integer, nil

Maximum value to display. Pass nil for no limit. (e.x. if count == 6,000 and limit == 5000, counter will display "5,000+")

hide_if_zero

false

Boolean

If true, a hidden attribute is added to the counter if count is zero.

text

""

String

Text to display instead of count.

round

false

Boolean

Whether to apply our standard rounding logic to value.

system_arguments

N/A

Hash

System arguments

Examples