Leaf UI
  • English

      • Badge

      Show counts, unread notifications or brief statuses.

      Basic usage

      Live previewBasic usage
      899+0
      RunningPendingStoppedUpdating
      basic.tsx
      import { Badge, Button } from '@sudden3/leaf-ui';
import { Bell, Mail } from 'lucide-react';
export function BadgeBasic() {
  return (
    <div className="leaf-demo-stack leaf-demo-stack--wide">
      <div className="leaf-demo-row">
        <Badge count={8} aria-label="8 notifications">
          <Button variant="outline" startIcon={<Bell />} aria-label="Notifications" />
        </Badge>
        <Badge count={120}>
          <Button variant="outline">Inbox</Button>
        </Badge>
        <Badge dot aria-label="New messages">
          <Button variant="ghost" startIcon={<Mail />} aria-label="Messages" />
        </Badge>
        <Badge count={0} showZero color="#7654c6" />
      </div>
      <div className="leaf-demo-row">
        <Badge status="success" text="Running" />
        <Badge status="warning" text="Pending" />
        <Badge status="error" text="Stopped" />
        <Badge status="info" text="Updating" />
      </div>
    </div>
  );
}

      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 '@sudden3/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.