Skip to content
双端兼容 · 桌面 + 移动

IconButton 图标按钮

EwIconButton 是只有图标的紧凑按钮,专为官网导航栏与卡片动作区设计:主题切换、社交链接、 搜索入口、下载动作等。默认幽灵形态,hover 才浮现底色,保持页面的安静气质。

无障碍标签 aria-label 缺省取图标名,对外暴露的动作建议显式传入。

基础用法

五种变体
ghost / soft 用于导航栏动作位,primary / dark 用于强提示动作。
vue
<EwIconButton icon="github" aria-label="GitHub" />
<EwIconButton icon="download" variant="soft" />
<EwIconButton icon="x" variant="dark" round />

尺寸与正圆

尺寸 / round 正圆形态
vue
<EwIconButton icon="menu" size="small" />
<EwIconButton icon="menu" size="large" />
<EwIconButton icon="sun" round variant="soft" />

导航栏组合

典型组合见 EwNavbarEwThemeToggle + 若干社交 EwIconButton + 一个 soft 下载按钮。

API

Props

属性说明类型默认值
icon图标名(kebab-case)string必填
variant视觉变体'ghost' | 'soft' | 'outline' | 'primary' | 'dark''ghost'
size尺寸'small' | 'default' | 'large''default'
round正圆形态booleanfalse
disabled禁用态booleanfalse
aria-label无障碍标签(缺省取 icon 名)stringicon
native-type原生类型string'button'

插槽

插槽说明
default追加内容(一般不用)

事件

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

基于 MIT 许可证发布