Button 按钮

常用的操作按钮。

何时使用

按钮用于开始一个即时操作。

基本使用

不同尺寸

禁用状态

圆角按钮

圆形按钮

朴素按钮

加载状态

图标按钮

自定义颜色 color

color 接受任意 CSS color 字符串。实心 type（primary/success/warning/danger/info）注入 background-color + border-color；描边 type（''/default/dashed）注入 color + border-color；text/link 仅注入 color。hover/active 联动由使用方用 CSS class 自兜底。

Button参数

参数	类型	默认	说明
size	ButtonSizeType	--	尺寸
type	ButtonType	--	类型：'primary' | 'default' | 'dashed' | 'link' | 'text'，加语义色 'success' | 'warning' | 'danger' | 'info'
plain	boolean	false	朴素按钮：背景透明，文字与边框跟主色
round	boolean	false	圆角按钮
circle	boolean	false	圆形按钮（常用于纯图标场景）
native-type	ButtonNativeType	button	原生 <button> 的 type 属性
danger	boolean	false	危险按钮（与 type 任意值叠加，渲染 --dangerous 类）
ghost	boolean	false	幽灵按钮（透明背景 + 描边色）
block	boolean	false	撑满父宽度
autoInsertSpace	boolean	true	两个 CJK 字符之间自动插入空格
href	string	--	设置后用 <a role="button"> 渲染
target	string	--	配合 href 透传 target
icon	string	VNode	--
iconPosition	'start'	'end'	start
disabled	boolean	false	是否为禁用状态
autofocus	boolean	false	原生 autofocus 属性
loading	boolean	{ delay?: number; icon?: VNode	string }
color	string	--	自定义按钮颜色（任意 CSS color 字符串）；实心型 type 注入 bg + border；描边型注入 color + border；text/link 仅 color

ButtonGroup 参数

ButtonGroup（<c-button-group>）：按钮组，向子按钮注入 size / disabled，并让相邻边框对齐。

参数	类型	默认	说明
size	'large'	'default'	'small'
disabled	boolean	false	注入给所有子按钮

Button类型定义

ButtonType

export type ButtonType =
  // 标准取值
  | 'primary'
  | 'default'
  | 'dashed'
  | 'link'
  | 'text'
  // 语义色快捷
  | 'success'
  | 'warning'
  | 'danger'
  | 'info'

ButtonSizeType

export type ButtonSizeType = 'large' | 'default' | 'small'

ButtonNativeType

export type ButtonNativeType = 'button' | 'submit' | 'reset'

Button插槽

插槽名	说明
icon	自定义图标组件