Badge

Badge positions itself absolutely against its parent, so every story wraps it in a relatively-sized box — on its own it has nothing to anchor to.

Import

import { Badge } from '@simal/ui/nativewindui';

Prop	Values	Default	Description
`children`	—	`"3"`	The count. Omit it entirely and the badge collapses to a bare dot.
`variant`	`destructive` · `info`	`"destructive"`	`destructive` (the default) for anything needing attention, `info` for the primary colour.
`maxCount`	—	—	Counts above this render as `{maxCount}+`, so the pill cannot grow without bound.
`textVariant`	—	—	Text scale for the count. Defaults to `caption2`.
`containerClassName`	—	—	Classes for the pill itself. `className` goes to the count text, not the container.

With no children it collapses to a bare dot — an unread marker.

<Badge />

Counts above maxCount render as {maxCount}+.

<Badge
  children="42"
  maxCount={9}
/>

<Badge
  variant="info"
  children="7"
/>