Skip to content

Button 按钮

按钮用于触发一个操作,如提交表单。

按钮类型

通过type设置按钮类型。按钮支持 primarysecondarysuccesswarningdangerinfo,默认为 primary

线框按钮

通过 plain 属性将按钮设置为线框按钮,线框按钮的文字为按钮颜色,背景为白色。

禁用状态

通过 disabled 属性来禁用按钮,禁用状态下按钮不可点击。

加载中

通过 loading 属性来设置加载中状态。

按钮形状

通过 round 设置圆形按钮。

按钮尺寸

通过 size 设置圆形大小。支持 largenormalsmallmini 四种尺寸,默认为 normal

块级按钮

按钮在默认情况下为行内块级元素,通过 block 属性可以将按钮的元素类型设置为块级元素。

添加按钮

图标按钮

自定义颜色

通过 color 属性可以自定义按钮的颜色。

类型

typescript
type ButtonType = 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info';
type SizeType = 'large' | 'normal' | 'small' | 'mini';

属性

属性名类型默认值说明
typestring as ButtonTypedefault类型,可选值为 primary info warning danger
sizestring as SizeTypenormal尺寸,可选值为 large small mini
colorstring--按钮颜色,支持传入linear-gradient渐变色
blockbooleanfalse是否为块级元素
plainbooleanfalse是否为朴素按钮
roundbooleanfalse是否为圆形按钮
disabledbooleanfalse是否禁用按钮
classNamestring--自定义类名
no-borderboolean--是否显示描边

事件

事件名说明回调参数
onClick点击按钮触发--

插槽

名称说明
default按钮文本内容

CSS 变量

名称默认值说明
--fm-button-height42px--
--fm-button-padding0 15px--
--fm-button-radius2px--
--fm-button-border-width1px--
--fm-button-colorvar(--fm-white)--
--fm-button-line-heightvar(--fm-line-height)--
--fm-button-font-sizevar(--fm-font-size)--
--fm-button-plain-backgroundvar(--fm-white)--
--fm-button-lg-height46px--
--fm-button-lg-font-size18px--
--fm-button-md-height38px--
--fm-button-md-font-size14px--
--fm-button-sm-height34px--
--fm-button-sm-padding0 8px--
--fm-button-sm-font-size12px--
--fm-button-xs-height28px--
--fm-button-xs-font-size10px--
--fm-button-secondary-colorvar(--fm-blue-light)--