Button Kit

一组可切换的按钮样式：传 variant 字符串即可换皮。纯 CSS，零动画库依赖。

npm i @fxshelf/button-kit

Demo

<Button variant="chroma" />

简介

Button Kit 把常见按钮外观收成一个组件，用字符串切换：

solid · outline · soft · glow · neon · shimmer · chroma · liquid · wipe · glass

chroma 来自常见炫彩渐变按钮：默认就有背景流光；悬停时 ::before 贴边淡入光晕。另有液体填充、擦除、毛玻璃等效果。

一套 core（变体映射 + CSS）配 React / Vue 薄封装。

方式	React	Vue
npm	`@fxshelf/button-kit`	`@fxshelf/button-kit/vue`
CDN `<script>`	unpkg IIFE → 全局 `ButtonKit`	暂无（SFC 源码）
复制源码	拷 `src/core` + `src/react`	拷 `src/core` + `src/vue`

安装

npm install @fxshelf/button-kit

并引入样式：

import '@fxshelf/button-kit/styles.css'

用法

React

import { Button } from '@fxshelf/button-kit'
import '@fxshelf/button-kit/styles.css'

export function Cta() {
  return <Button variant="glow">Continue</Button>
}

Vue

Vue 入口是源码 .vue SFC，不会预编译进 dist。目标项目需要能编译 SFC（例如 Vite + @vitejs/plugin-vue）。

<script setup lang="ts">
import { Button } from '@fxshelf/button-kit/vue'
import '@fxshelf/button-kit/styles.css'
</script>

<template>
  <Button variant="neon">Continue</Button>
</template>

CDN（React 18 UMD）

适合静态页或零构建场景。需先加载 React 18.x UMD（React 19 起官方不再提供 UMD），再加载 IIFE，并引入 CSS。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <link rel="stylesheet" href="https://unpkg.com/@fxshelf/button-kit/dist/index.css" />
</head>
<body>
  <div id="app"></div>

  <script crossorigin src="https://unpkg.com/react@18.3.1/umd/react.production.min.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.production.min.js"></script>
  <script src="https://unpkg.com/@fxshelf/button-kit/dist/button-kit.iife.js"></script>

  <script>
    var Button = ButtonKit.Button
    ReactDOM.createRoot(document.getElementById('app')).render(
      React.createElement(Button, { variant: 'glow' }, 'Continue'),
    )
  </script>
</body>
</html>

全局 ButtonKit 上有 Button、BUTTON_VARIANTS 等。
也可用 jsDelivr：https://cdn.jsdelivr.net/npm/@fxshelf/button-kit/dist/button-kit.iife.js
生产环境建议锁定版本：@fxshelf/button-kit@0.1.0/...
顺序：React 必须在 button-kit 之前加载；样式用 dist/index.css。
不要用 jsDelivr 的 gh/.../dist 直链（dist/ 不进 Git）。
仓库内完整示例：CDN示例.html
Vue 暂无 script 直引；请用 npm 或下方复制源码。

复制源码（不经过 npm）

从仓库 packages/button-kit/src（或已安装的 node_modules/@fxshelf/button-kit/）拷贝：

src/core/     # 必拷（含 styles.css）
src/react/    # 仅 React 项目
src/vue/      # 仅 Vue 项目

建议放到例如 components/button-kit/，保持 core 与 react/vue 同级，然后：

// React
import { Button } from './components/button-kit/react'
import './components/button-kit/core/styles.css'

// Vue
import { Button } from './components/button-kit/vue'
import './components/button-kit/core/styles.css'

Props

Property	Type	Default	说明
`variant`	`string`	`solid`	样式名；`chroma` 为炫彩流光（光晕仅 hover）；未知值回退 `solid`
`children` / slot	—	—	按钮文案
`className`	`string`	—	追加 class
`style`	`CSSProperties`	—	内联样式
其余	`button` 原生属性	—	`disabled`、`onClick` 等

也可导入 BUTTON_VARIANTS 拿到全部合法字符串。

本页目录