Skip to content



Counter is a component that displays the quantity.

It is used in various components such as:

  • controls,
  • limit progress bars,
  • widget titles,
  • table headers,
  • etc.


Counter is a static component and shouldn't be clickable.


The appropriate theme for a counter varies based on its context and the component it is located in or near.

Counter themes
ThemeAppearance examplesStylesUsage
default background-color: var(--bg-primary-neutral), border: 1px solid var(--border-primary), color: var(--text-secondary)Use inside secondary controls and next to various types of inputs.
light-bluebackground-color: var(--bg-primary-info), color: var(--text-invert)Use in filters to focus on the selected values.
orangebackground-color: var(--bg-primary-warning), color: var(--text-invert)Use to display the reached limit.
redbackground-color: var(--bg-primary-critical), color: var(--text-invert)Use to display the over-limit.
white (invert)background-color: var(--bg-primary-neutral), color: var(--text-primary)Use inside primary controls with a bright/dark background color.

Text counters

The size of text counters is determined by the typography used in the element where the numeric value is being displayed. Typically, these counters are positioned near widget or table titles, within text, and other relevant locations. Additional examples can be found in the Example tab.

For example, the counter in the table title has the same text size as the title itself.

Counter location

The counter should always be positioned to the right of other interface elements, because it's an additional data.

Usage in UX/UI

Use a counter to display an element that changes numerically.

Counter usage examples
Output data counterUsually it shows the total results. Use it next to the title of a table or widget.
Entered data counterThe counter typically displays the limit of characters allowed, commonly used in Input and Textarea. When the limit is reached or surpassed, the color of the counter changes.
LimitsThe counter changes color to indicate when the limit has been exceeded.

In primary controls, use a counter with the white (invert) theme. Otherwise, it will not be readable on a bright/dark background.

For notifications, use the Dot component with a counter inside.

In a table, a text counter can be used inside a tag to mark or group the data.

Released under the MIT License.

Released under the MIT License.