Badge

An absolute-positioned overlay indicator for notification counts or status dots. Wraps any element and renders a small indicator in the top-right corner.

Import

import { Badge } from '@atom-forge/ui';

---

Props

Prop	Type	Default	Description
children	Snippet	—	The element the badge is overlaid on.
count	number	—	Number displayed. Badge hides automatically when count is 0.
dot	boolean	false	Show a dot instead of a number.
max	number	99	Maximum number shown. Displays N+ when exceeded.
color	'accent' | 'red' | 'green' | 'blue'	'accent'	Badge color.
hidden	boolean	false	Force-hides the badge.
class	string	—	Extra Tailwind classes on the wrapper div.

---

Usage

<!-- Count badge -->
<Badge count={3}>
  <Button icon={defineIcon(IconBell)} ghost/>
</Badge>

<!-- Dot badge -->
<Badge dot color="red">
  <Button icon={defineIcon(IconMail)} ghost/>
</Badge>

<!-- Overflow -->
<Badge count={142} max={99} color="red">
  <Button icon={defineIcon(IconBell)} ghost/>
</Badge>

<!-- Hidden -->
<Badge count={5} hidden>
  <Button ghost label="No badge"/>
</Badge>

When to use

Use for a count or status dot over another element, such as unread notifications.

Alternatives

Use Chip for inline status text rather than an overlay.

Setup and behavior

The indicator is presentational and ignores pointer events. Counts are visible only when greater than zero; dot remains visible without a count unless hidden is set. Supply an accessible notification description on the wrapped control.