Leaf UI
  • 简体中文

      • Badge 角标

      展示数量、未读提醒或简短状态。

      基础用法

      交互预览基础用法
      899+0
      运行中待处理已停止更新中
      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 条通知">
          <Button variant="outline" startIcon={<Bell />} aria-label="通知" />
        </Badge>
        <Badge count={120}>
          <Button variant="outline">收件箱</Button>
        </Badge>
        <Badge dot aria-label="有新消息">
          <Button variant="ghost" startIcon={<Mail />} aria-label="消息" />
        </Badge>
        <Badge count={0} showZero color="#7654c6" />
      </div>
      <div className="leaf-demo-row">
        <Badge status="success" text="运行中" />
        <Badge status="warning" text="待处理" />
        <Badge status="error" text="已停止" />
        <Badge status="info" text="更新中" />
      </div>
    </div>
  );
}

      Badge API

      属性类型默认值说明
      childrenReactNode—设置后将角标附着在该内容右上方
      countnumber | string—角标内容
      maxnumber99超过该值时展示 max+
      showZerobooleanfalse允许展示 0
      dotbooleanfalse使用圆点提醒
      status'success' | 'warning' | 'error' | 'info' | 'default'—使用对应颜色的状态圆点
      textReactNode—圆点旁的说明
      colorstring—自定义角标颜色

      类型

      定义组件属性或组装列表时可导入相关类型。

      import type { BadgeProps } from '@sudden3/leaf-ui';

      使用说明

      独立使用时可展示数量或状态。附着在按钮等内容上时，为圆点提醒提供 aria-label，以说明提醒的含义。