CounterLabel

Adds a count to navigational elements and buttons.

Page navigation navigation

React

readyNot reviewed for a11y

Rails

readyNot reviewed for a11y

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	Required	Description
scheme		`'primary' \| 'secondary'` Pass in 'primary' for a darker background and inverse text, or 'secondary' for a lighter background and primary text. Omitting the scheme prop renders the default counter scheme
className		`string` Class name(s) for custom styling.
sx		`BetterSystemStyleObject`