SkynexUI Button 按钮组件实战：5 种样式变体与交互状态全解析-二趣网

SkynexUI Button 按钮组件实战：5 种样式变体与交互状态全解析

【免费下载链接】components⚛️ Deliver UI for Web and Mobile platforms without taking care about complexity on how to style there. It's based in React and Flutter and uses the core of CSS specification to allow you to write cross platform styles.项目地址: https://gitcode.com/gh_mirrors/components3/components

SkynexUI Components 是一套基于 React 与 Flutter 的跨平台 UI 组件库，其中SkynexUI Button 按钮组件是开发者最常用的交互元素之一。它用一套基于 CSS 规范的样式 DSL，让你在 Web 与移动端写出风格一致的按钮，无需关心各平台繁琐的样式差异。本篇文章将带你快速掌握 Button 按钮组件的5 种尺寸变体、3 种视觉变体、7 种颜色变体以及完整交互状态，是一份适合新手的按钮组件实战指南。

一、为什么选择 SkynexUI 按钮组件？

传统的跨平台开发中，Web 端用 CSS、Flutter 端用 Widget 样式，两套体系各写一遍，维护成本极高。SkynexUI 的核心思路是用一套样式规则（基于 CSS 的 key-value 约定）同时驱动两端：

Web 端：基于 React，样式通过styleSheet属性直接声明
移动端：基于 Flutter，使用同构的StyleSheet写法
可读性强：hover、focus、disabled等状态直接内联在样式对象里，结构一目了然

按钮组件的核心实现位于 button.tsx，官方使用文档可参考 button.mdx，还有完整的交互示例放在 button.stories.mdx 中。

二、快速上手：安装与引入

在 React 项目中一条命令即可安装：

npm install @skynexui/components

然后在代码中引入并直接使用：

import { Button } from '@skynexui/components'; <Button label="立即开始" variant="primary" size="md" />

在 Flutter 项目中则通过pubspec.yaml引入包，用法同样简单：

import 'package:skynexui_components/components.dart';

💡 最基础的按钮只需要一个label属性即可渲染，其余属性都有合理的默认值，零成本上手。

三、5 种尺寸变体：从紧凑到醒目自由切换

这是标题中提到的核心亮点——Button 按钮组件共提供 5 种尺寸变体，通过size属性切换，分别是：

尺寸	适用场景	内边距（水平/垂直）
`xs`	表格操作、标签栏	x2.5 / x1.5
`sm`	常规列表操作（默认）	x3 / x2
`md`	表单提交按钮	x4 / x2
`lg`	卡片主按钮	x4 / x2
`xl`	落地页 CTA 大按钮	x6 / x3

不同尺寸还会自动匹配对应的文字排版变体（body2~body4），字号与留白比例协调，无需手动调样式。具体尺寸映射可在 button.tsx 中查看buttonSizes定义。

<Button label="小按钮" size="sm" /> <Button label="大按钮" size="xl" />

四、3 种视觉样式变体：实心、描边与幽灵

variant属性控制按钮的视觉层级，对应 3 种主流设计风格：

primary（实心 filled）：主操作按钮，背景色为品牌主色，视觉冲击力最强
secondary（描边 outlined）：次操作按钮，透明底 + 主色描边，悬停时填充主色
tertiary（幽灵 ghost）：弱化操作按钮，仅文字着色，悬停时浮现浅色背景

这三者在设计系统中分别承担"主要动作 / 次要动作 / 补充动作"的层级，配合使用可以让页面主次分明。样式逻辑集中在 button.tsx 的buttonStyles对象中。

<Button label="主操作" variant="primary" /> <Button label="次操作" variant="secondary" /> <Button label="补充操作" variant="tertiary" />

五、7 种颜色变体与一键自定义配色

通过colorVariant属性，你可以直接套用主题色板，共 7 种可选：

primary（品牌主色）、accent（强调色）、positive（成功绿）、negative（危险红）、warning（警示橙）、dark（深色）、light（浅色）。

比如删除确认按钮，一个negative就能表达语义：

<Button label="删除文件" colorVariant="negative" variant="primary" />

如果你需要完全自定义品牌色，还可以使用buttonColors属性，一次性传入 4 个颜色槽：

<Button variant="secondary" label="自定义配色按钮" buttonColors={{ mainColor: '#C65D21', mainColorStrong: '#AB4E19', mainColorLight: '#E67635', contrastColor: '#FFFFFF', }} />

该用法在 button.stories.mdx 中有完整 Story 示例。此外圆角也可通过rounded属性在none / sm / md / full之间切换，full会得到胶囊形按钮。

六、按钮交互状态全解析：hover、focus、disabled 与水波纹

这是按钮组件实战中最容易忽略、也最能提升体验的部分。SkynexUI Button 的交互状态全部内建：

1. hover 悬停状态

实心按钮：背景加深为mainColorStrong
描边按钮：背景填充主色、文字反白
幽灵按钮：浮现浅色背景、文字反白

2. focus 聚焦状态

与 hover 保持一致的视觉反馈，方便键盘用户定位当前操作，同时保留outline: 0保证样式统一。

3. disabled 禁用状态

自动降低透明度至 0.65，鼠标变为not-allowed，防止误操作。

4. 点击水波纹（Ripple）特效

按钮内置了 Material 风格的水波纹动画，点击时从触点扩散出涟漪，时长 600ms，交互反馈非常细腻。实现位于 ripples.tsx，基于useRipplesHook 完成，无需任何额外配置即可生效。

🎯 实战提示：这些状态都可在styleSheet中覆盖，例如styleSheet={{ hover: { transform: 'scale(1.02)' } }}即可实现放大反馈。

七、进阶玩法：图标按钮、链接按钮与全宽按钮

掌握了基础变体后，这 3 个高频用法能让按钮组件真正融入业务：

图标 + 文字：传入iconName="github"，图标自动排在文字右侧
纯图标圆形按钮：只传iconName不传label，自动渲染为 48×48 的圆形按钮，适合刷新、关闭等场景
链接按钮：传入href自动渲染为<a>标签，内部路由自动走 Next.js Router，外部链接自动新开标签页
全宽按钮：fullWidth让按钮撑满容器，常用于移动端表单底部

<Button iconName="arrowRight" /> // 纯图标 <Button label="带图标" iconName="github" /> // 图标+文字 <Button label="去首页" href="/" /> // 内部链接 <Button label="提交" type="submit" fullWidth /> // 全宽提交

八、移动端同样适用：Flutter 按钮组件

作为跨平台组件库，Button 在 Flutter 端同样可用。Flutter 实现位于 button.dart，与 Web 端共享同一套样式心智模型——你不需要学习两套按钮体系，写一套样式思路即可覆盖两端。下图是项目在 iOS 端的应用图标，代表了这套组件库对移动端的完整支持：

如果你正在规划一个"一套代码、两端统一"的产品，不妨把 SkynexUI Button 按钮组件作为跨平台样式的第一块试验田，从 5 种尺寸变体到完整的交互状态，体验一次真正意义上的样式统一。

写在最后

本文带你完整走过了SkynexUI Button 按钮组件的实战全流程：5 种尺寸变体、3 种视觉变体、7 种颜色变体，以及 hover / focus / disabled / 水波纹等交互状态。无论是 Web 端的 React 项目还是移动端的 Flutter 应用，你都可以用几乎相同的写法获得一致的按钮体验。上手时记得多翻看 button.stories.mdx 中的交互示例，动手调一调参数，比看任何文档都来得快。

创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考

企业官网建设流程全解析