基础组件

Button

Alune 月光主题下的按钮，直接保留 Ant Design 原有属性、类型与行为。

使用方式

按钮由宿主传入状态和回调，适合在不同应用和文档中复用。先完成快速开始中的 Provider 与样式配置。

import { Button } from '@alune/ui';

接入要求见快速开始，选择依据见交互与无障碍规范。

运行示例

运行与复制源码来自同一 TSX 文件。浮层、状态和主题独立于文档；所有回调只更新本地模拟数据。

查看运行源码

源码文件

import { useEffect, useRef, useState } from 'react';
import { Button, DialogIcon, Space } from '@alune/ui';

export default function Example() {
  const [busy, setBusy] = useState(false);
  const timer = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
  useEffect(() => () => clearTimeout(timer.current), []);
  return (
    <div className="example">
      <section className="example-group">
        <h2 className="example-title">操作与状态</h2>
        <Space wrap size="middle">
          <Button
            type="primary"
            loading={busy}
            icon={<DialogIcon name="check" />}
            onClick={() => {
              setBusy(true);
              timer.current = setTimeout(() => setBusy(false), 700);
            }}
          >
            保存
          </Button>
          <Button>默认</Button>
          <Button type="text">文字</Button>
          <Button danger>危险</Button>
          <Button disabled>禁用</Button>
        </Space>
      </section>
      <section className="example-group">
        <h2 className="example-title">按钮尺寸</h2>
        <Space wrap size="middle" align="center">
          <Button size="small">小尺寸</Button>
          <Button>默认尺寸</Button>
          <Button size="large">大尺寸</Button>
        </Space>
      </section>
    </div>
  );
}

API

直接转导出 Ant Design 的 Button，保留原始 Props、泛型、复合成员与回调语义。下表列出常用属性；类型取自当前安装版本，默认值沿用 Ant Design 6。

AluneUIProvider 统一主题与减少动效；宿主维护受控状态、校验和业务回调。

Button 完整 API 与默认值 ↗

Button

ButtonProps

属性 / 方法	类型	默认值	必填	说明
`type`	`"link" \| "text" \| "default" \| "primary" \| "dashed"`	`default`	否	按钮类型。
`size`	`SizeType`	`middle`	否	尺寸；Alune 不改写原值。
`disabled`	`boolean`	`false`	否	禁用点击。
`loading`	`boolean \| { delay?: number; icon?: React.ReactNode; }`	`false`	否	等待状态，可设置延迟。
`danger`	`boolean`	`false`	否	危险动作样式。
`onClick`	`MouseEventHandler<HTMLElement>`	`—`	否	原生鼠标点击事件，业务操作由宿主处理。

交互与使用限制

为每个操作提供可访问名称，为输入关联 label；使用语义化组件和清晰焦点。不要只靠颜色传达状态，禁用与等待时避免重复执行。

宿主负责状态、业务操作、错误处理与真实内容。组件不读取业务 store、路由或 Electron。示例中的反馈和等待均为本地模拟。

键盘、焦点、风险确认与通知策略的完整约定见交互规范。

查看实现 ↗ 编辑文档 ↗ 设计与验收