项目正在快速迭代中,API 与视觉细节可能随版本调整,请勿用于生产环境。开发迭代中,请勿用于生产环境。
Skip to content
双端兼容 · 桌面 + 移动

Button 按钮 ​

EvButton 是官网 CTA 的基本单元。五种变体对应不同的强调层级:primary 主色实心用于页面关键动作, dark 墨色实心适合次要转化位,soft 柔和灰底用于工具条与次级操作,outline 与 ghost 承载更轻的动作。

按钮默认安静,hover 时才给出颜色与光影反馈;pill 开启全圆胶囊形态,适合首屏与定价卡的转化按钮。

基础用法 ​

五种变体
vue
<EvButton>免费开始</EvButton>
<EvButton variant="dark" pill>立即下载</EvButton>
<EvButton variant="soft">查看文档</EvButton>
<EvButton variant="outline">了解更多</EvButton>
<EvButton variant="ghost">跳过</EvButton>

尺寸 ​

small / default / large
vue
<EvButton size="small">小型操作</EvButton>
<EvButton size="large" pill>免费开始</EvButton>

图标与状态 ​

图标位支持左侧 icon 与右侧 icon-right(常用于「继续 →」式的引导动作)。loading 状态下自动禁点并展示旋转图标; 只有图标没有内容时自动进入仅图标形态。

图标位 / 加载 / 禁用 / 块级
vue
<EvButton icon="download" pill>下载客户端</EvButton>
<EvButton variant="soft" icon-right="arrow-right">继续</EvButton>
<EvButton block variant="dark" pill icon="github">使用 GitHub 登录</EvButton>

与 EvIconButton 的分工

需要承载内容的动作用 EvButton;纯图标动作(导航栏的主题切换、社交链接等)用 EvIconButton,它有更紧凑的方形比例与无障碍标签约定。

API ​

Props ​

属性说明类型默认值
variant视觉变体'primary' | 'dark' | 'soft' | 'outline' | 'ghost''primary'
size尺寸'small' | 'default' | 'large''default'
pill全圆胶囊形态booleanfalse
block块级铺满booleanfalse
icon左侧图标名string—
icon-right右侧图标名string—
loading加载态(禁点)booleanfalse
disabled禁用态booleanfalse
native-type原生类型'button' | 'submit' | 'reset''button'

插槽 ​

插槽说明
default按钮内容

事件 ​

事件说明参数
click点击(loading / disabled 时不派发)MouseEvent

基于 MIT 许可证发布