文档目录

按钮

原版几何的石纹按钮，含 default / success / ghost 三种视觉变体。

import { useState } from "react";

import { Button } from "./index";

/**
 * Button 预览用例（规格 §10：story / 示例可运行）
*/
export function ButtonDemo() {
  const [count, setCount] = useState(0);

  return (
    <div className="flex flex-wrap items-center gap-4">
      <Button className="w-100" onClick={() => setCount(c => c + 1)}>
        默认（已点
        {count}
        {" "}
        次）
      </Button>
      <Button className="w-100" variant="success">Success</Button>
      <Button className="w-60" variant="ghost">Ghost</Button>
      <Button className="w-100" disabled>Disabled</Button>
    </div>
  );
}

安装

CLI 拷贝

$npx shadcn add @tennantite/button

npm 直装

$pnpm add @tennantite/ui

npm 方式安装编译产物；需要改造源码请用上方的 CLI 拷贝安装。

用法

npm 导入

import { Button } from "@tennantite/ui";

CLI 拷贝导入

import { Button } from "@/components/tennantite/button";

import { useState } from "react";

import { Button } from "./index";

/**
 * Button 预览用例（规格 §10：story / 示例可运行）
*/
export function ButtonDemo() {
  const [count, setCount] = useState(0);

  return (
    <div className="flex flex-wrap items-center gap-4">
      <Button className="w-100" onClick={() => setCount(c => c + 1)}>
        默认（已点
        {count}
        {" "}
        次）
      </Button>
      <Button className="w-100" variant="success">Success</Button>
      <Button className="w-60" variant="ghost">Ghost</Button>
      <Button className="w-100" disabled>Disabled</Button>
    </div>
  );
}

API Reference

Prop	Type	描述
variant	"default" \| "ghost" \| "realms" \| "success"	视觉变体：default 石纹 / success 主行动绿 / ghost 透明。

源码

packages/ui/src/primitives/button/index.tsx

npm 包保留源码目录，可直接复制改造。