Skip to main content
Bedrock Design System

Counter

Counter is a visual indicator that displays a numerical count, commonly used to show notification counts, or other numeric values.

UsagePermalink to: Usage

When to usePermalink to: When to use

  • To display notification counts or unread items.
  • To show quantities alongside labels or icons.
  • For badge-style numeric indicators.

When not to usePermalink to: When not to use

  • For non-numeric content — use Tag instead.
  • For status indicators without numbers.

ExamplesPermalink to: Examples

Basic usagePermalink to: Basic usage

Counter handles various count values, including zero and large numbers.

Open
import { Counter } from "@peakon/bedrock/react/counter/Counter";
import { Inline } from "@peakon/bedrock/react/layout";

function Snippet() {
  return (
    <Inline spacing={16}>
      <Counter count={0} />
      <Counter count={6} />
      <Counter count={9} />
      <Counter count={88} />
      <Counter count={106} />
    </Inline>
  );
}

SizePermalink to: Size

Counter is available in three sizes: small, medium (default), and large. Match the size with adjacent text for visual harmony.

Open
import { Counter } from "@peakon/bedrock/react/counter/Counter";
import { Stack, Inline } from "@peakon/bedrock/react/layout";
import { BodyText } from "@peakon/bedrock/react/typography";

function Snippet() {
  return (
    <Stack spacing={16}>
      <Inline spacing={4} alignBlock="center">
        <BodyText size="small" bold as="span">
          Notifications
        </BodyText>
        <Counter count={66} size="small" />
      </Inline>
      <Inline spacing={4} alignBlock="center">
        <BodyText size="medium" bold as="span">
          Notifications
        </BodyText>
        <Counter count={66} size="medium" />
      </Inline>
      <Inline spacing={4} alignBlock="center">
        <BodyText size="large" bold as="span">
          Notifications
        </BodyText>
        <Counter count={66} size="large" />
      </Inline>
    </Stack>
  );
}

VariantPermalink to: Variant

Counter has three variants for different levels of visual emphasis:

  • default - Subtle, for general use
  • highlighted - Medium-high emphasis
  • highlighted-loud - High emphasis, for urgent notifications
Open
import { Counter } from "@peakon/bedrock/react/counter/Counter";
import { Stack, Inline } from "@peakon/bedrock/react/layout";

function Snippet() {
  return (
    <Stack spacing={16}>
      <Inline spacing={16}>
        <Counter count={6} variant="default" />
        <Counter count={88} variant="default" />
        <Counter count={106} variant="default" />
      </Inline>
      <Inline spacing={16}>
        <Counter count={6} variant="highlighted" />
        <Counter count={88} variant="highlighted" />
        <Counter count={106} variant="highlighted" />
      </Inline>
      <Inline spacing={16}>
        <Counter count={6} variant="highlighted-loud" />
        <Counter count={88} variant="highlighted-loud" />
        <Counter count={106} variant="highlighted-loud" />
      </Inline>
    </Stack>
  );
}

Props TablePermalink to: Props Table

CounterPermalink to: Counter

Props extend from HTML span element(external link), with the omission of className and style

NameTypeDescriptionDefaultRequired
countnumber

The numeric value to display.

—Yes
sizesmall | medium | large

Controls the size of the counter.

mediumNo
variantdefault | highlighted | highlighted-loud

Controls the visual style of the counter.

defaultNo
  • Tag — For non-numeric labels and status indicators.