Indicator

Indicator renders a small pill-shaped badge, typically used for unread counts or status dots. It is a Text rendered as a div, so it accepts every Text and Box prop.

Import#

import { Indicator } from "@reactberry/system/blocks";

Usage#

import { Indicator } from "@reactberry/system/blocks";
import { Button, Text } from "@reactberry/system/elements";

export default function InboxButton({ unread }: { unread: number }) {
  return (
    <Button variant="ghost">
      <Text>Inbox</Text>
      {unread > 0 && <Indicator color="white">{unread > 99 ? "99+" : unread}</Indicator>}
    </Button>
  );
}

Examples#

Count on a button#

Show an unread count next to a label, and hide the badge when the count is zero. Click Inbox to clear it.

Status dot#

Remove the padding and shrink the size to get a dot. Pair it with a text label, since colour alone doesn't carry meaning for everyone.

API#

Indicator#

Indicator accepts every Text and Box prop. Props you pass override these defaults:

It also sets display="flex", centred content and flex="none".

Accessibility#

• Indicator renders a plain div with no role. A screen reader reads its text where it appears, for example "Inbox 4".
• A dot has no text. Add a visible label next to it, or aria-hidden if the meaning is already in the surrounding text.

Notes#

• The text colour is inherited; set color for contrast against the red background.
• The prop type is an open object ({ [key: string]: any }), so props are not type-checked, and no IndicatorProps type is exported.
• Indicator is a named export; there is no default export.