IndicatorNew

A dot or a count on the corner of a button, an avatar or a tab.

$ pnpm dlx shadcn@latest add @dashral/indicator

Installation

$ pnpm dlx shadcn@latest add @dashral/indicator

Adds the component, the components it builds on, its npm packages and the theme tokens it uses. Or by its full URL: https://dashral.com/r/indicator.json

Usage

example.tsx

1import { Button } from "@/components/dashral/button"
2import { BellIcon } from "lucide-react"
3import { Indicator } from "@/components/dashral/indicator"
4
5<Indicator count={unread} label={`${unread} unread`}>
6  <Button variant="outline" size="icon" aria-label="Notifications"><BellIcon /></Button>
7</Indicator>

Using the npm package? Import from @dashral/ui/components/indicator instead, here and in the examples; the rest is the same.

Examples

On avatars

shape="round" sets it on the edge; position picks the corner.

MPANSD

Coming and going

The count rises as notifications arrive and hides when they're read, scaling in and out on the spring.

API reference

Indicator

Also takes every prop of <span>(opens in a new tab).

Prop	Type	Default
`children`	`ReactNode` What it sits on: an icon button, an avatar, a tab. Required.	—
`count`	`number` A number in a small badge; without it, a dot. 0 hides it.	—
`max`	`number` Above this, "99+".	`99`
`showZero`	`boolean` Show the badge at 0.	`false`
`show`	`boolean` Whether it shows; it scales in and out.	`true`
`color`	`"primary" \| "neutral" \| "info" \| "success" \| "warning" \| "destructive" \| "highlight"` Its fill.	`"destructive"`
`position`	`"top-end" \| "bottom-end" \| "top-start" \| "bottom-start"` Which corner (logical, so it mirrors in Arabic).	`"top-end"`
`shape`	`"square" \| "round"` round: for a round element, so it sits on the edge rather than off the corner.	`"square"`
`pulse`	`boolean` A ring pulsing out from it.	`false`
`label`	`string` What it means, for screen readers: "3 unread". Without it, it's decoration.	—
`classNames`	`{ indicator }` The dot's classes, e.g. "ring-card" on a card.	—
`className`	`string` Extra classes, merged with cn() so yours win.	—

Accessibility

With label, screen readers hear the label (the number is hidden from them); without it, the whole thing is hidden, so put the meaning in the element's own name.
The count is written in the locale's digits.

Motion

Scales in and out from its centre on the spring when show or count changes; pulse is a ping that's still with reduced motion.