> Leaf UI 0.6.0 · Package: @ifhover/leaf-ui · Source: b30c3d3a8fa9c5e15d0d0522cebfbd33f60c6b06
> Browser documentation: https://ifhover.github.io/leaf-ui/v/0.6.0/en/components/badge.html

> For AI agents: the complete documentation index is available at https://ifhover.github.io/leaf-ui/v/0.6.0/en/llms.txt, the full documentation bundle is available at https://ifhover.github.io/leaf-ui/v/0.6.0/en/llms-full.txt.

# Badge

Show counts, unread notifications or brief statuses.

## Basic usage


8

basic.tsx

Copy code

```tsx lineNumbers file="../../../src/examples/en/badge/basic.tsx"
import { Badge, Button } from '@ifhover/leaf-ui';

import { Bell } from 'lucide-react';

export function BadgeBasic() {
  return (
    <Badge count={8} aria-label="8 unread notifications">
      <Button variant="outline" startIcon={<Bell />} aria-label="Notifications" />
    </Badge>
  );
}
```

Expand code

## Count rules

Counts above `max` show the limit with a plus sign. Use `showZero` to display zero.


Count limit99+

Show zero0

basic.tsx

Copy code

```tsx lineNumbers file="../../../src/examples/en/badge/basic.tsx"
import { Badge, Button, Flex, Space, Text } from '@ifhover/leaf-ui';

import { Bell } from 'lucide-react';

export function BadgeCounts() {
  return (
    <Space wrap size={32}>
      <Flex direction="column" gap="sm" align="start">
        <Text>Count limit</Text>
        <Badge count={120}>
          <Button variant="outline" startIcon={<Bell />} aria-label="Notifications" />
        </Badge>
      </Flex>
      <Flex direction="column" gap="sm" align="start">
        <Text>Show zero</Text>
        <Badge count={0} showZero>
          <Button variant="outline" startIcon={<Bell />} aria-label="Notifications" />
        </Badge>
      </Flex>
    </Space>
  );
}
```

Expand code

## Dot reminders

Indicate new content without displaying a count.


basic.tsx

Copy code

```tsx lineNumbers file="../../../src/examples/en/badge/basic.tsx"
import { Badge, Button } from '@ifhover/leaf-ui';

import { Mail } from 'lucide-react';

export function BadgeDot() {
  return (
    <Badge dot aria-label="Unread messages">
      <Button variant="outline" startIcon={<Mail />} aria-label="Messages" />
    </Badge>
  );
}
```

Expand code

## Status indicators

Describe the current status with a dot and text.


RunningPendingStoppedUpdatingInactive

basic.tsx

Copy code

```tsx lineNumbers file="../../../src/examples/en/badge/basic.tsx"
import { Badge, Space } from '@ifhover/leaf-ui';

export function BadgeStatuses() {
  return (
    <Space wrap size={24}>
      <Badge status="success" text="Running" />
      <Badge status="warning" text="Pending" />
      <Badge status="error" text="Stopped" />
      <Badge status="info" text="Updating" />
      <Badge status="default" text="Inactive" />
    </Space>
  );
}
```

Expand code

## Badge API

| Prop       | Type                                                       | Default | Description                          |
| ---------- | ---------------------------------------------------------- | ------- | ------------------------------------ |
| `children` | `ReactNode`                                                | —       | Attach the indicator to this content |
| `count`    | `number \| string`                                         | —       | Badge content                        |
| `max`      | `number`                                                   | `99`    | Display max+ above this count        |
| `showZero` | `boolean`                                                  | `false` | Show a zero count                    |
| `dot`      | `boolean`                                                  | `false` | Use a notification dot               |
| `status`   | `'success' \| 'warning' \| 'error' \| 'info' \| 'default'` | —       | Use a semantic status dot            |
| `text`     | `ReactNode`                                                | —       | Text beside the indicator            |
| `color`    | `string`                                                   | —       | Custom indicator color               |

## Types

Import the component props and item types when preparing your own values.

```ts
import type { BadgeProps } from '@ifhover/leaf-ui';
```

## Usage notes

Use alone for counts or status text. When attaching a notification dot to another control, provide aria-label to explain the notification.