Badge

free

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

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

Installation

Add this component with the NateUI CLI.

npx nateui@latest add Badge

pnpm dlx nateui@latest add Badge

yarn dlx nateui@latest add Badge

Examples

Basic

9New

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

Inline

999New

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

export default function InlineDemo() {
  return (

Count Overflow

9+99+

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

Dot

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

Placement

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

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'>;