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.31.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

NameTypeDefaultDescription
count
Integer, Float::INFINITY, nil

0

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

scheme
Symbol

:default

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

limit
Integer, nil

5_000

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
Boolean

false

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

text
String

""

Text to display instead of count.

round
Boolean

false

Whether to apply our standard rounding logic to value.

system_arguments
Hash

N/A

System arguments

Examples