Badge

Inline status indicator with color variants.

Example

default success warning danger info

Props

Prop	Type	Default	Description
`variant`	`'default' \| 'success' \| 'warning' \| 'danger' \| 'info'`	`'default'`	Color variant
`class`	`string`	—	Additional CSS classes
`children`	`Snippet`	—	Badge content

Usage

<script>
  import { Badge } from '@chrissnell/chonky-ui';
</script>

<Badge variant="success">online</Badge>

NotificationBadge

Compact count pill that auto-hides at zero and caps large counts (e.g. 99+). Companion to Badge — use Badge for inline status text, NotificationBadge for unread/pending counts adjacent to an element.

Badge vs NotificationBadge

Side-by-side comparison:

Badge: unread

NotificationBadge: 5

Counts

Count=0 is hidden by default; over-cap counts render as ${cap}+.

count=0 (hidden)

0 count=0, showZero

1 count=1

12 count=12

99+ count=100 (default cap)

99+ count=9999 (default cap)

999+ count=9999, cap=999

Adjacent to a nav link

Typical use case: positioned next to a nav item in a sidebar, indicating unread items for that destination. The badge's fixed small footprint slots neatly against text.

Inbox count: 3

Accessibility

Renders role="status" with an auto-generated aria-label like "5 unread" or "99+ unread". Screen readers announce the label rather than the visible digits, so 99+ reads as "99+ unread". Override via the label prop for different semantics (e.g. "3 in queue", "12 pending approvals").

3 default label ("3 unread")

3 label="3 in queue"

99+ over-cap, custom label

Props

Prop	Type	Default	Description
`count`	`number`	—	Required. Count to display.
`cap`	`number`	`99`	Counts above this render as `${cap}+`.
`showZero`	`boolean`	`false`	When `false`, count=0 renders nothing.
`label`	`string`	—	Override the default `aria-label`.
`class`	`string`	—	Additional CSS classes.

Usage

<script>
  import { NotificationBadge } from '@chrissnell/chonky-ui';
</script>

<!-- Hidden when count is 0 -->
<NotificationBadge count={unreadCount} />

<!-- Always visible, even at zero -->
<NotificationBadge count={unreadCount} showZero />

<!-- Custom cap and aria label -->
<NotificationBadge count={pending} cap={999} label={`${pending} pending approvals`} />