Badge

Attaches notification counts or unread dots to icons, navigation items, and compact controls.

Default

A compact notification count with automatic max-value formatting.

tsx

<Badge count={8} />

Installation

tsx

import { Badge } from "madagent";

Counts and dot mode

Omit count for a dot, use max to cap large values, and opt into displaying zero.

4299+0

tsx

<Badge />
<Badge count={42} color="accent" />
<Badge count={120} max={99} />
<Badge count={0} showZero color="neutral" />

Anchored

Wrap the attached Badge in an interactive parent. Put the complete notification label on that control and hide the decorative Badge subtree from assistive technology.

tsx

<button type="button" aria-label="3 unread notifications">
  <Badge count={3} aria-hidden="true">
    <Bell />
  </Badge>
</button>

Props

Prop	Type	Default	Description
`count`	`number`	-	Displayed count; omit for dot mode
`max`	`number`	`99`	Largest count before showing a plus suffix
`color`	`"accent""negative""neutral"`	`"negative"`	Semantic indicator color
`showZero`	`boolean`	`false`	Renders a zero count instead of hiding it
`children`	`ReactNode`	-	Optional anchor element the badge is attached to

RTL Support

Components automatically adapt to right-to-left languages using CSS logical properties.

Preview

Usage

tsx

<button type="button" aria-label="٣ إشعارات غير مقروءة">
  <Badge count={3} aria-hidden="true">
    <Bell />
  </Badge>
</button>