Badge

Number or status indicator appearing at the top-right corner of an icon or text.

Basic Usage

Set the displayed number with count.

import { Badge, Button } from '@airo-ui/react'

function Demo() {
  return (
    <div style={{ display: 'flex', gap: 32, alignItems: 'center' }}>
      <Badge count={5}>
        <Button size="sm">Messages</Button>
      </Badge>
      <Badge count={15}>
        <Button size="sm">Comments</Button>
      </Badge>
      <Badge count={100}>
        <Button size="sm">Notifications</Button>
      </Badge>
    </div>
  )
}

Max Count

Numbers over max will display as "N+".

<Badge count={100} max={99}>
  <Button size="sm">Notifications</Button>
</Badge>

Dot

Set dot to show only a dot without a number.

<Badge dot>
  <Button size="sm">Messages</Button>
</Badge>
<Badge dot>
  <Button size="sm">Settings</Button>
</Badge>

API

Props

Name	Type	Default	Description
count	number	--	Displayed number
max	number	99	Max value, shows N+ when exceeded
dot	boolean	false	Show as dot
children	React.ReactNode	--	Wrapped element

Interaction

• Number changes with spring elastic transition
• Badge slightly enlarges on hover