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, and this page is available as Markdown at https://ifhover.github.io/leaf-ui/v/0.6.0/en/components/badge.md.
Leaf UI
  • English

      • Badge

      Show counts, unread notifications or brief statuses.

      Basic usage

      8
      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>
  );
}

      Count rules

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

      Count limit99+
      Show zero0
      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>
  );
}

      Dot reminders

      Indicate new content without displaying a count.

      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>
  );
}

      Status indicators

      Describe the current status with a dot and text.

      RunningPendingStoppedUpdatingInactive
      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>
  );
}

      Badge API

      PropTypeDefaultDescription
      childrenReactNode—Attach the indicator to this content
      countnumber | string—Badge content
      maxnumber99Display max+ above this count
      showZerobooleanfalseShow a zero count
      dotbooleanfalseUse a notification dot
      status'success' | 'warning' | 'error' | 'info' | 'default'—Use a semantic status dot
      textReactNode—Text beside the indicator
      colorstring—Custom indicator color

      Types

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

      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.