index.md

Button 按钮

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

何时使用

标记了一个（或封装一组）操作命令，响应用户点击行为，触发相应的业务逻辑。

形态

:::demo 通过variant设置按钮形态，目前支持solid、outline、text三种形态，默认为outline。

button/shape

:::

主题色

:::demo 通过color设置按钮的主题色，目前支持primary、secondary、danger三种主题色，默认为secondary。
注意：如果variant设置成solid，则默认使用primary主题色。

button/theme

:::

尺寸

:::demo 通过size设置按钮尺寸，支持sm、md、lg三种类型的尺寸，默认为md。

button/size

:::

禁用状态

:::demo 通过disabled参数设置按钮禁用状态。

button/disable

:::

加载中状态

:::demo 通过loading参数设置按钮加载中状态。

button/loading

:::

图标按钮

:::demo

button/icon

:::

图标位置

:::demo

button/iconPos

:::

按钮组

将多个按钮作为一组放入按钮组容器中。按钮组可通过 size 设置尺寸，并与下拉菜单混合使用。

:::demo

button/buttonGroup

:::

Button 参数

参数名	类型	默认	说明	跳转 Demo
variant	IButtonVariant	'outline'	可选，按钮形态	形态
color	IButtonColor	'secondary'	可选，按钮主题	主题色
size	IButtonSize	'md'	可选，按钮尺寸	尺寸
icon	string	--	可选，自定义按钮图标	图标按钮
iconPos	IButtonIconPos	'left'	可选，自定义按钮图标位置	图标位置
shape	IButtonShape	--	可选，按钮形状(圆形/圆角)	图标按钮
disabled	boolean	false	可选，是否禁用 button	禁用状态
loading	boolean	false	可选，设置加载中状态	加载中状态
native-type	IButtonType	'button'	可选，按钮原生 type 属性

Button 类型定义

IButtonVariant

type IButtonVariant = 'solid' | 'outline' | 'text';

IButtonSize

type IButtonSize = 'lg' | 'md' | 'sm';

IButtonColor

type IButtonColor = 'primary' | 'secondary' | 'danger';

IButtonShape

type IButtonShape = 'circle' | 'round';

IButtonType

type IButtonType = 'button' | 'submit' | 'reset';

IButtonIconPos

type IButtonIconPos = 'left' | 'right';

ButtonGroup 参数

参数名	类型	默认	说明	跳转 Demo
size	IButtonSize	'md'	可选，按钮组尺寸	按钮组

ButtonGroup 类型定义

IButtonGroupSize

type IButtonGroupSize = 'lg' | 'md' | 'sm';