button

基础库 1.0.0 开始支持本组件。

按钮，用于强调操作并引导用户去点击。

代码示例

开发者工具中预览

属性说明

属性名	类型	默认值	必填	说明	最低支持版本
size	string	default	否	按钮的大小	1.0.0
type	string	default	否	按钮的样式类型	1.0.0
disabled	boolean	false	否	是否禁用	1.0.0
loading	boolean	false	否	是否带 loading 图标	1.0.0
form-type	string		否	用于嵌在form 组件中，控制 submit/reset	1.0.0
open-type	string		否	用于调用开放能力, 详情见下方	1.0.0
hover-class	string	button-hover	否	点击状态的样式类	1.0.0
hover-start-time	number	20	否	按住后多久出现点击态，单位毫秒	1.0.0
hover-stay-time	number	70	否	手指松开后点击态保留时间，单位毫秒	1.0.0
hover-stop-propagation	boolean	false	否	指定是否阻止本节点的祖先节点出现点击态	1.0.0
bindgetphonenumber	Function		否	获取用户手机号回调，只在 open-type=getPhoneNumber 时有效	1.14.0

size 取值范围

值	说明	最低支持版本
default	默认大小	1.0.0
mini	小尺寸	1.0.0

type 取值范围

值	说明	最低支持版本
primary	红色	1.0.0
default	白色	1.0.0

form-type 取值范围

值	说明	最低支持版本
submit	提交表单	1.0.0
reset	重置表单	1.0.0

open-type 有效值

值	说明	最低支持版本
share	触发用户转发, 可以配合 data-channel 属性来设置分享的 channel，具体请参考ShareParam	1.0.0
getPhoneNumber	获取用户手机号，可以从 bindgetphonenumber 回调中获取到用户信息，详细说明	1.14.0
contact	跳转到客服页面，详细说明	1.44.0

扫码体验

请使用字节宿主APP扫码

Bug & Tip

• Tip：目前，<button> 组件的边框不是通过 border 属性来控制的，而是有个 :after 伪类，所以如果需要修该边框样式，请对该伪类元素设置样式。
• Tip：button-hover 的样式为 { background-color: rgba(0, 0, 0, 0.1); opacity: 0.7; }。