Components/Data Display/Indicator

Indicator

Data Display

Dot badge overlaid on a child element (unread count, status).

Absolute-positioned dot placed at one of four corners of the wrapped child. Accepts an optional label for count display. processing prop adds a pulsing animation.

Usage

import { Indicator, ActionIcon } from "nosible-ux"
import { Bell } from "lucide-react"

export default function Example() {
  return (
    <Indicator label={3} color="#FF3B3B">
      <ActionIcon aria-label="Alerts">
        <Bell size={16} />
      </ActionIcon>
    </Indicator>
  )
}

Examples

Positions and processing

Accessibility

The indicator dot is decorative (aria-hidden="true"). Convey the count or status in the wrapped element's accessible name or in nearby text.

Props

Name	Type	Default	Description
`children`	`ReactNode`	—	The element that the indicator is anchored to.
`color`	`string \| undefined`	`"var(--c-critical)"`	Background color of the indicator dot.
`disabled`	`boolean \| undefined`	`false`	When true, suppresses the indicator entirely.
`label`	`string \| number \| undefined`	—	Text or number rendered inside the dot. Omit for a bare dot.
`offset`	`number \| undefined`	`0`	Inset from the corner in pixels — positive values nudge the dot inward.
`position`	`IndicatorPosition \| undefined`	`"top-end"`	Corner where the dot is placed.
`processing`	`boolean \| undefined`	`false`	When true, applies a pulsing scale animation (1.8s ease-in-out).
`size`	`number \| undefined`	`10`	Diameter of the indicator dot in pixels.
`withBorder`	`boolean \| undefined`	`false`	Adds a 2px Obsidian border ring to the dot for contrast against backgrounds.

← All Components Getting Started →