Button / 按钮

用于触发一个操作。

基础的

基础的 Button 包含一个动画效果。

加载中

表示正在运行或加载中的状态。

禁用的

不对任何操作进行响应。

阴影

使用阴影突出显示更高层级的按钮。

类型

不同状态下的按钮。

反色

底色与主色相反的透明按钮。

伸缩性

不同大小的按钮组件。

图标

按钮内的图标色彩和大小将会被自动设置。

APIs / 接口文档

Button.Props

属性描述类型推荐值默认
type按钮的类型ButtonTypesButtonTypesdefault
ghost是否为反色按钮boolean-false
loading是否显示加载中的指示器boolean-false
shadow是否显示阴影boolean-false
auto自动缩放宽度boolean-false
effect是否显示动画效果boolean-true
disabled是否禁用按钮boolean-false
onClick点击事件MouseEventHandler--
icon在按钮内显示图标ReactNode--
iconRight在按钮右侧显示图标ReactNode--
htmlType按钮的原生类型属性ButtonHTMLAttributes.type-button
refRef 转发Ref<HTMLButtonElement | null>--
...原生属性ButtonHTMLAttributes'id', 'className', ...-

ButtonTypes

type ButtonTypes =
  | 'default'
  | 'secondary'
  | 'success'
  | 'warning'
  | 'error'
  | 'abort'
  | 'secondary-light'
  | 'success-light'
  | 'warning-light'
  | 'error-light'