跳至主要内容

Common Button 常用按钮

按钮用于开启一个闭环的操作任务。


组件类型

基础

图标

通栏

组件样式

组件尺寸

类型大小描述
ExtraSmall24px--
Small32px--
Medium40px--
Large48px--

组件形状

圆角统一为6px

组件主题

组件状态

应用场景

主要按钮通常用于页面中最重要的操作,用于提交表单,确认等操作。

文案内容

简体中文繁体中文英文
确认確認Confirm
取消取消Cancel
删除刪除Delete

设计资源

类型资源状态
设计Design Kit (Figma)
StorybookStorybook

设计指南

推荐
按钮容器的宽度根据文本的长度动态设置。
推荐
容器的宽度可以根据响应式布局设置。
慎用
容器的宽度不应该小于标签文本。

API 参考

属性说明类型默认值
aria-label按钮的标签string-

设计变量

变量默认值用法
$transition_duration-button_primary-bgvar(--kpay-transition_duration-none)主要按钮-背景色-动画持续时间