Skip to content

Counter

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.

Examples

Default

25
<%= render(Primer::CounterComponent.new(count: 25)) %>

Schemes

2525
<%= render(Primer::CounterComponent.new(count: 25, scheme: :primary)) %>
<%= render(Primer::CounterComponent.new(count: 25, scheme: :secondary)) %>

Arguments

NameTypeDefaultDescription
countInteger, Float::INFINITY, nil0The number to be displayed (e.x. # of issues, pull requests)
schemeSymbol:defaultColor scheme. One of :default, :primary, or :secondary.
limitInteger, nil5_000Maximum value to display. Pass nil for no limit. (e.x. if count == 6,000 and limit == 5000, counter will display "5,000+")
hide_if_zeroBooleanfalseIf true, a hidden attribute is added to the counter if count is zero.
textString""Text to display instead of count.
roundBooleanfalseWhether to apply our standard rounding logic to value.
system_argumentsHashN/ASystem arguments