CounterLabel

Adds a count to navigational elements and buttons.

Page navigation navigation

React

ready

Rails

ready

Figma

(12)

<CounterLabel>12</CounterLabel>

<CounterLabel>12</CounterLabel>

The primary variant is visually heavier than the default.

(12) (12)

<Stack direction="horizontal">
  <CounterLabel>12</CounterLabel>
  <CounterLabel scheme="primary">12</CounterLabel>
</Stack>

<Stack direction="horizontal">
  <CounterLabel>12</CounterLabel>
  <CounterLabel scheme="primary">12</CounterLabel>
</Stack>

Name	Default	Description
variant		`'primary' \| 'secondary'` Pass in 'primary' for a darker background and inverse text, or 'secondary' for a lighter background and primary text. Omitting the variant prop renders the default counter scheme
scheme Deprecated		`'primary' \| 'secondary'` Use `variant` instead.
className		`string` Class name(s) for custom styling.