混灵画布Design SystemVersion 1.1.3
Liquid GlassLOCAL PREVIEW

按钮

按钮的尺寸与状态,默认胶囊、圆形图标及12px圆角矩形卡片操作。

4 个规范与展示分区 · 独立组件页面

按钮

组件规范与变体。组合示例保持自身业务职责。

VariantDefaultHoverActiveFocusDisabledLoading
Primary
Secondary
Ghost
Text
Danger

尺寸与内容

Small 28 / Medium 36 / Large 44 px

上方为状态对照矩阵;组件实际悬停、按下与键盘 Focus 均可体验。

组合与切换

复用上方同一按钮规范

默认文字操作为胶囊轮廓,纯图标操作为圆形。Ghost 与 Text 保持轻量,选中与键盘焦点分别表达。

圆角矩形 / 12px

卡片、表格与密集工具区可使用 .btn.rounded。它只改变圆角,沿用上方的按钮材质、尺寸和状态;默认胶囊继续用于常规操作。Small 28 / Medium 36 / Large 44px,触屏布局优先使用44px命中区域。

悬停与焦点样本固定展示对应状态;其余可用按钮支持实际悬停、按下与键盘聚焦。示例点击只提供本页提示。

File Actions / 文件操作

文字胶囊与圆形图标,共用按钮材质
下载示例文件

上传入口选择文件后跳转进度示例;下载提供本地 TXT 示例文件。