示例
直接操作示例，查看组件在具体任务中的状态与反馈。
使用建议
用于明确、即时的操作
适合提交表单、确认选择或启动一个清晰的流程。按钮文案应直接说明动作结果。
控制操作层级
同一区域优先保留一个主操作；次要操作使用默认层级，避免多个入口争夺注意力。
把异步状态留在原位置
提交过程中使用 loading，暂时不可执行时使用 disabled，并由宿主业务负责结果与错误文案。
引入方式
从已验证的公开子路径导入组件；全局样式接入方式见安装指南。
import { BaseButton } from '@inf-monkeys-tech/monkeys-design/components/base';当前限制
- 仅图标按钮需要提供可辨识的 ariaLabel；业务流程、权限和提交错误仍由宿主应用负责。
- Deterministic visual evidence and final packed React 18/19 checks are pending T17/T23.
API
查看组件源码export interface BaseButtonProps
extends Omit<
ButtonHTMLAttributes<HTMLButtonElement>,
'children' | 'className' | 'disabled' | 'onClick' | 'style' | 'title' | 'type'
> {
children?: ReactNode;
label?: ReactNode;
icon?: ReactNode;
endIcon?: ReactNode;
type?: 'button' | 'submit' | 'reset';
title?: string;
ariaLabel?: string;
tone?: BaseControlTone;
size?: BaseControlSize;
active?: boolean;
iconOnly?: boolean;
disabled?: boolean;
loading?: boolean;
stopPropagation?: boolean;
appearance?: BaseAppearance;
className?: string;
classNames?: BaseButtonClassNames;
style?: CSSProperties;
onClick?: MouseEventHandler<HTMLButtonElement>;
}| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
children | 在 BaseButton 内渲染的子内容；支持渲染函数时以对应的 Props 类型为准。 | ReactNode | — |
label | 按钮显示的主要文字或自定义标签内容。 | ReactNode | — |
icon | 显示在主要内容旁的图标。 | ReactNode | — |
endIcon | 显示在按钮文本末尾的图标。 | ReactNode | — |
type | 按钮提交行为对应的原生 type 属性。 | 'button' | 'submit' | 'reset' | 'button' |
title | 写入按钮原生 title 属性、在悬停时提供补充提示的文本。 | string | — |
ariaLabel | 在没有可见文本时提供给按钮的可访问名称。 | string | — |
tone | 组件使用的语义色调。 | BaseControlTone | — |
size | 组件使用的预设尺寸。 | BaseControlSize | — |
active | 是否以当前激活状态呈现。 | boolean | false |
iconOnly | 是否以仅图标按钮的紧凑布局呈现。 | boolean | false |
disabled | 是否禁用该组件及其可交互行为。 | boolean | false |
loading | 是否显示加载状态并阻止重复操作。 | boolean | false |
stopPropagation | 点击按钮时是否阻止事件继续冒泡。 | boolean | false |
appearance | 覆盖组件使用的外观令牌或局部样式配置。 | BaseAppearance | — |
className | 追加到组件根元素的 CSS 类名。 | string | — |
classNames | 按组件公开的结构插槽分别追加 CSS 类名。 | BaseButtonClassNames | — |
style | 追加到组件根元素的内联样式。 | CSSProperties | — |
onClick | 按钮被点击时调用的鼠标事件回调。 | MouseEventHandler<HTMLButtonElement> | — |