按钮
按钮的尺寸与状态,默认胶囊、圆形图标及12px圆角矩形卡片操作。
4 个规范与展示分区 · 独立组件页面
按钮
组件规范与变体。组合示例保持自身业务职责。
| Variant | Default | Hover | Active | Focus | Disabled | Loading |
|---|---|---|---|---|---|---|
| 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 示例文件。