简介

按钮组件用于触发操作，如提交表单、页面跳转等。支持多种主题（theme）、风格（variant）、尺寸（size）、形状（shape）、状态（state）、禁用、图标等特性，满足不同业务场景。

使用方法

局部引入，在需要引入的页面或组件的 index.json 中配置：

"usingComponents": {
  "fs-button": "ava-ui/fxui/fs-button/index"
}

代码演示

按钮主题（theme）

按钮风格（variant）

按钮尺寸（size）

图标按钮

按钮形状（shape）

按钮状态（state）

下拉分割按钮（dropdown）

API

属性

属性	说明	类型	可选值	默认值
theme	按钮主题	string	default/primary/warn/black	default
variant	按钮风格	string	base/outline/text	base
size	按钮尺寸	string	micro/mini/small/medium/large	medium
shape	按钮形状	string	default/round-rect/square/circle	default
disabled	是否禁用	boolean	—	false
loading	是否加载中	boolean	—	false
active	是否启用按下效果	boolean	—	true
text	按钮文本	string	—	—
icon	图标名称	string	—	—
iconPosition	图标位置	string	left/right	left
btnStyle	按钮自定义样式	string	—	''
textStyle	文本自定义样式	string	—	''
iconStyle	图标自定义样式	string	—	''
maxWidth	按钮最大宽度	string	—	'100%'
minWidth	按钮最小宽度	string	—	''
tapId	按钮点击标识	string	—	''
dropdown	是否开启下拉分割按钮	boolean	—	false
dropdownItems	下拉菜单项数组	array	—	[]

尺寸规格说明

按钮提供五种尺寸，可以在不同场景下选择合适的按钮尺寸。

尺寸	说明	高度(px)	文字大小(px)	内边距(px)	多行支持
micro	超小号	24	12	左右各12	不支持
mini	迷你号	28	13	左右各13	不支持
small	小号	32	13	左右各13	支持
medium	中号（默认）	36	14	左右各14	不支持
large	大号	40	13	左右各13	支持

• micro (24px): 适用于极小空间或辅助性操作，如表格内的按钮
• mini (28px): 适用于小空间或次要操作，如工具栏按钮
• small (32px): 适用于常规列表或紧凑型界面，支持两行文本展示
• medium (36px): 默认尺寸，适用于大多数场景
• large (40px): 适用于需要强调的主要操作或触控优化场景，支持两行文本展示

形状规格说明

形状	说明	圆角	宽高比
default	默认矩形	8px	自适应
round-rect	圆角矩形	999rpx	自适应
square	方形（仅图标）	8px	1:1
circle	圆形（仅图标）	50%	1:1

事件

事件名	说明	回调参数
onclick	点击按钮左侧主操作区时触发
ondropdown	点击右侧下拉箭头区域（或遮罩关闭）时触发
ondropdownselect	选择下拉菜单项时触发（选中后自动关闭面板）	{ index, item, visible: false }

Slot

名称	说明
默认	按钮内容
left	文案左侧插槽
right	文案右侧插槽

说明

• 支持通过 icon 属性设置图标，使用 fxui/common_css/iconfont。
• 支持通过 iconStyle 属性自定义图标样式，如颜色、大小等。
• 支持通过 variant 属性切换基础、描边、文字三种风格。
• 支持通过 theme 属性切换主要、默认、警告、黑色四种主题。
• 支持通过 shape 属性切换默认、圆角矩形、方形、圆形四种形状。
• 支持 loading 状态，loading 状态下按钮不可点击。
• 支持 disabled 状态，disabled 状态下按钮不可点击且样式变淡。
• 支持按下状态样式，按下时背景色加深。
• 支持 active 属性控制按下效果，设置为 false 时禁用按下的视觉效果但仍可点击。
• 支持自定义按钮内容、样式和图标。
• 支持通过 maxWidth 属性设置按钮的最大宽度，默认为 '100%'。
• 支持通过 minWidth 属性设置按钮的最小宽度，确保按钮不会过窄。
• 支持通过 tapId 属性设置按钮的点击标识，便于事件追踪。
• 支持通过 dropdown 属性开启下拉分割按钮：按钮右侧渲染垂直分割线与下拉箭头，左侧主操作区点击触发 onclick，右侧箭头区点击展开/收起下拉面板并触发 ondropdown（{ visible }）。下拉菜单项通过 dropdownItems 属性传入（数组每项为 { name, label }），选中后触发 ondropdownselect 并自动关闭面板；也可通过 selectComponent 调用 openDropdown / closeDropdown 控制面板状态。
• 描边（outline）模式下分割线颜色与按钮边框保持一致，下拉箭头颜色与文字颜色一致。

minWidth 使用示例

设置固定最小宽度

<!-- 设置最小宽度为 120px -->
<fs-button text="提交" minWidth="120px" />

<!-- 设置最小宽度为 8rem -->
<fs-button text="取消" minWidth="8rem" />

<!-- 设置最小宽度为 100rpx -->
<fs-button text="确定" minWidth="100rpx" />

结合 maxWidth 使用

<!-- 设置宽度范围：最小 120px，最大 200px -->
<fs-button text="长文本按钮" minWidth="120px" maxWidth="200px" />

<!-- 设置宽度范围：最小 8rem，最大 100% -->
<fs-button text="自适应宽度按钮" minWidth="8rem" maxWidth="100%" />

不同尺寸按钮的最小宽度

<!-- 小按钮设置最小宽度 -->
<fs-button text="小按钮" size="small" minWidth="80px" />

<!-- 大按钮设置最小宽度 -->
<fs-button text="大按钮" size="large" minWidth="160px" />

iconStyle 使用示例

自定义图标颜色

<!-- 红色图标 -->
<fs-button text="删除" icon="fxui_all-delete" iconStyle="color: #ff4d4f;" />

<!-- 蓝色图标 -->
<fs-button text="编辑" icon="fxui_all-edit" iconStyle="color: #1890ff;" />

自定义图标大小

<!-- 大图标 -->
<fs-button text="大图标" icon="fxui_all-add" iconStyle="font-size: 18px;" />

<!-- 小图标 -->
<fs-button text="小图标" icon="fxui_all-add" iconStyle="font-size: 12px;" />

组合样式

<!-- 自定义颜色和大小 -->
<fs-button
  text="自定义图标"
  icon="fxui_all-star"
  iconStyle="color: #faad14; font-size: 16px;"
/>

<!-- 带透明度的图标 -->
<fs-button
  text="半透明图标"
  icon="fxui_all-heart"
  iconStyle="color: #ff4d4f; opacity: 0.6;"
/>

字体规格类（不含颜色）

Figma变量	类名	字号	行高	字重
Caption2	.text-10	10px	14px	normal
Caption2-M	.text-10_M	10px	14px	medium
Caption2-B	.text-10_B	10px	14px	bold
Caption1	.text-11	11px	14px	normal
Caption1-M	.text-11_M	11px	14px	medium
Caption1-B	.text-11_B	11px	14px	bold
Foot Note	.text-12	12px	18px	normal
Foot Note-M	.text-12_M	12px	18px	medium
Foot Note-B	.text-12_B	12px	18px	bold
Body2	.text-13	13px	18px	normal
Body2-M	.text-13_M	13px	18px	medium
Body2-B	.text-13_B	13px	18px	bold
Body1	.text-14	14px	20px	normal
Body1-M	.text-14_M	14px	20px	medium
Body1-B	.text-14_B	14px	20px	bold
Title2	.text-15	15px	24px	normal
Title2-M	.text-15_M	15px	24px	medium
Title2-B	.text-15_B	15px	24px	bold
Title1	.text-16	16px	24px	normal
Title1-M	.text-16_M	16px	24px	medium
Title1-B	.text-16_B	16px	24px	bold
Large Title	.text-18	18px	28px	normal
Large Title-M	.text-18_M	18px	28px	medium
Large Title-B	.text-18_B	18px	28px	bold
Nav Title	.text-20	20px	30px	normal
Nav Title-M	.text-20_M	20px	30px	medium
Nav Title-B	.text-20_B	20px	30px	bold
22	.text-22	22px	30px	normal
22-M	.text-22_M	22px	30px	medium
22-B	.text-22_B	22px	30px	bold
BI Title	.text-28_B	28px	32px	bold

字重变体

每个字号都提供三种字重变体：

• 无后缀：normal 字重（如 .text-14）
• _M 后缀：medium 字重（如 .text-14_M）
• _B 后缀：bold 字重（如 .text-14_B）

打开预览