Badge

free

Badge adds low-noise counts or status markers to controls, rows, and labels.

Preview

Dark

import { PiBell } from 'react-icons/pi'
import Badge from '@/components/ui/Badge';
import Button from '@/components/ui/Button';

export default function UsageDemo() {
  return (
    <Badge content={6} maxCount={9} placement="top-end">
      <Button icon={<PiBell />} variant="subtle" aria-label="Notifications" />
    </Badge>
  );
}

Installation

Add this component with the NateUI CLI.

npx nateui@latest add Badge

Examples

Basic

Preview

Dark

9New

import { PiUser } from 'react-icons/pi'
import Avatar from '@/components/ui/Avatar';
import Badge from '@/components/ui/Badge';

export default function BasicDemo() {
  return (
    <div className="inline-flex flex-wrap items-center justify-center gap-4">
      <Badge content={9} placement="top-end">
        <Avatar shape="round" icon={<PiUser />} />
      </Badge>
      <Badge content="New" placement="top-end">
        <Avatar shape="round" icon={<PiUser />} />
      </Badge>
    </div>
  );
}

Inline

Preview

Dark

999New

import Badge from '@/components/ui/Badge';

export default function InlineDemo() {
  return (
    <div className="inline-flex flex-wrap items-center justify-center gap-4">
      <Badge />
      <Badge content={9} />
      <Badge content={99} />
      <Badge content="New" />
    </div>
  );
}

Count Overflow

Preview

Dark

9+99+

import { PiUser } from 'react-icons/pi'
import Avatar from '@/components/ui/Avatar';
import Badge from '@/components/ui/Badge';

export default function CountOverflowDemo() {
  return (
    <div className="inline-flex flex-wrap items-center justify-center gap-4">
      <Badge content={10} maxCount={9}>
        <Avatar shape="round" icon={<PiUser />} />
      </Badge>
      <Badge content={128}>
        <Avatar shape="round" icon={<PiUser />} />
      </Badge>
    </div>
  );
}

Dot

Preview

Dark

import { PiUser } from 'react-icons/pi'
import Avatar from '@/components/ui/Avatar';
import Badge from '@/components/ui/Badge';

export default function DotDemo() {
  return (
    <div className="inline-flex flex-wrap items-center justify-center gap-4">
      <Badge>
        <Avatar shape="round" icon={<PiUser />} />
      </Badge>
      <Badge innerClass="bg-palette-emerald">
        <Avatar shape="round" icon={<PiUser />} />
      </Badge>
      <Badge innerClass="bg-palette-orange">
        <Avatar shape="round" icon={<PiUser />} />
      </Badge>
    </div>
  );
}

Placement

Preview

Dark

import { PiUser } from 'react-icons/pi'
import Avatar from '@/components/ui/Avatar';
import Badge from '@/components/ui/Badge';
import Button from '@/components/ui/Button';

export default function PlacementDemo() {
  return (
    <div className="inline-flex flex-wrap items-center justify-center gap-8">
      <Badge content={3} placement="top-end" overlap="square">
        <Button shape="none">Square</Button>
      </Badge>
      <Badge content={3} placement="top-end">
        <Button>Round</Button>
      </Badge>
      <Badge placement="bottom-end" overlap="circle" innerClass="bg-success">
        <Avatar icon={<PiUser />} />
      </Badge>
    </div>
  );
}

API

Badge accepts the props below plus native props for the root span.

Prop	Description	Type	Default
`badgeStyle`	Inline style applied to the badge indicator element. Positional styles override the generated placement classes.	`CSSProperties`	-
`children`	Element the badge indicator is attached to. When omitted, Badge renders inline.	`ReactNode`	-
`className`	Class names applied to the wrapper when children are present, or to the badge itself when inline.	`string`	-
`content`	Count or label displayed inside the badge. Omit it to render a dot indicator.	`string \| number`	-
`innerClass`	Class names applied to the indicator element for custom color or sizing.	`string`	-
`maxCount`	Maximum number to display before showing a `+` suffix.	`number`	`99`
`overlap`	Geometry model used when the badge overlaps a child element. Match the target shape: `square`, `round`, or `circle`.	`BadgeOverlap`	`'round'`
`placement`	Corner where the badge indicator is anchored when children are present.	`BadgePlacement`	`'bottom-end'`
`ref`	Ref forwarded to the root `span`.	`Ref<HTMLSpanElement>`	-
`...nativeSpanProps`	Native props for the root `span`.	`NativeBadgeSpanProps`	-

Types

type BadgePlacement = 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end';
type BadgeOverlap = 'square' | 'round' | 'circle';
type NativeBadgeSpanProps = Omit<ComponentProps<'span'>, 'content'>;