feat(button): replace btnType with variant and color

.changeset/flat-beds-sing.md

@@ -0,0 +1,10 @@
+---
+'@tiny-design/react': patch
+'@tiny-design/tokens': patch
+---
+
+Refactor button styling to use `variant` and `color` instead of `btnType`.
+
+This is a breaking change for `Button`, `Button.Group`, and `SplitButton`.
+Button theme tokens were renamed to variant/color-based keys such as
+`button.solid.primary.bg` and `button.outline.danger.border`.

apps/docs/guides/cli.md

@@ -32,29 +32,29 @@ tiny-design usage ./src                 # Scan project for import stats
 
 ### Knowledge Query
 
-| Command | Description |
-|---------|-------------|
-| `tiny-design list [category]` | List all components grouped by category. Filter by: Foundation, Layout, Navigation, Data Display, Form, Feedback, Miscellany. |
-| `tiny-design info <component>` | Props table with types, required flags, default values, and descriptions. |
-| `tiny-design doc <component>` | Full markdown documentation for a component. |
-| `tiny-design demo <component> [name]` | Demo source code (TSX). Lists available demos if no name is given. |
-| `tiny-design token [category]` | Design token values. Categories: colors, typography, spacing, breakpoints, shadows. |
-| `tiny-design icon [search]` | List all 240+ icons or search by name. |
+| Command                               | Description                                                                                                                   |
+| ------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------- |
+| `tiny-design list [category]`         | List all components grouped by category. Filter by: Foundation, Layout, Navigation, Data Display, Form, Feedback, Miscellany. |
+| `tiny-design info <component>`        | Props table with types, required flags, default values, and descriptions.                                                     |
+| `tiny-design doc <component>`         | Full markdown documentation for a component.                                                                                  |
+| `tiny-design demo <component> [name]` | Demo source code (TSX). Lists available demos if no name is given.                                                            |
+| `tiny-design token [category]`        | Design token values. Categories: colors, typography, spacing, breakpoints, shadows.                                           |
+| `tiny-design icon [search]`           | List all 240+ icons or search by name.                                                                                        |
 
 ### Project Analysis
 
-| Command | Description |
-|---------|-------------|
-| `tiny-design doctor` | Diagnostic checks: package.json, React version, peer deps, TypeScript, duplicate React detection. |
+| Command                   | Description                                                                                          |
+| ------------------------- | ---------------------------------------------------------------------------------------------------- |
+| `tiny-design doctor`      | Diagnostic checks: package.json, React version, peer deps, TypeScript, duplicate React detection.    |
 | `tiny-design usage [dir]` | Scan source files for `@tiny-design/react` imports. Shows component usage counts and file locations. |
 
 ### Global Flags
 
-| Flag | Description | Default |
-|------|-------------|---------|
-| `--format json\|text\|markdown` | Output format | `text` |
-| `--lang en\|zh` | Output language | `en` |
-| `--detail` | Include extended information | `false` |
+| Flag                            | Description                  | Default |
+| ------------------------------- | ---------------------------- | ------- |
+| `--format json\|text\|markdown` | Output format                | `text`  |
+| `--lang en\|zh`                 | Output language              | `en`    |
+| `--detail`                      | Include extended information | `false` |
 
 ## Examples
 
@@ -123,8 +123,8 @@ export default function TypeDemo() {
   return (
     <Flex gap="sm">
       <Button>Default</Button>
-      <Button btnType="primary">Primary</Button>
-      <Button btnType="outline">Outline</Button>
+      <Button variant="solid" color="primary">Primary</Button>
+      <Button variant="outline" color="primary">Outline</Button>
     </Flex>
   );
 }

apps/docs/guides/cli.zh_CN.md

@@ -32,29 +32,29 @@ tiny-design usage ./src                 # 扫描项目中的导入统计
 
 ### 知识查询
 
-| 命令 | 描述 |
-|------|------|
-| `tiny-design list [category]` | 按分类列出所有组件。可筛选：基础、布局、导航、数据展示、表单、反馈、其他。 |
-| `tiny-design info <component>` | 属性表，包含类型、是否必填、默认值和描述。 |
-| `tiny-design doc <component>` | 组件的完整 Markdown 文档。 |
-| `tiny-design demo <component> [name]` | 演示源代码（TSX）。未指定名称时列出可用演示。 |
-| `tiny-design token [category]` | 设计令牌值。分类：colors、typography、spacing、breakpoints、shadows。 |
-| `tiny-design icon [search]` | 列出所有 240+ 个图标或按名称搜索。 |
+| 命令                                  | 描述                                                                       |
+| ------------------------------------- | -------------------------------------------------------------------------- |
+| `tiny-design list [category]`         | 按分类列出所有组件。可筛选：基础、布局、导航、数据展示、表单、反馈、其他。 |
+| `tiny-design info <component>`        | 属性表，包含类型、是否必填、默认值和描述。                                 |
+| `tiny-design doc <component>`         | 组件的完整 Markdown 文档。                                                 |
+| `tiny-design demo <component> [name]` | 演示源代码（TSX）。未指定名称时列出可用演示。                              |
+| `tiny-design token [category]`        | 设计令牌值。分类：colors、typography、spacing、breakpoints、shadows。      |
+| `tiny-design icon [search]`           | 列出所有 240+ 个图标或按名称搜索。                                         |
 
 ### 项目分析
 
-| 命令 | 描述 |
-|------|------|
-| `tiny-design doctor` | 诊断检查：package.json、React 版本、对等依赖、TypeScript、重复 React 检测。 |
-| `tiny-design usage [dir]` | 扫描源文件中的 `@tiny-design/react` 导入，显示组件使用次数和文件位置。 |
+| 命令                      | 描述                                                                        |
+| ------------------------- | --------------------------------------------------------------------------- |
+| `tiny-design doctor`      | 诊断检查：package.json、React 版本、对等依赖、TypeScript、重复 React 检测。 |
+| `tiny-design usage [dir]` | 扫描源文件中的 `@tiny-design/react` 导入，显示组件使用次数和文件位置。      |
 
 ### 全局参数
 
-| 参数 | 描述 | 默认值 |
-|------|------|--------|
-| `--format json\|text\|markdown` | 输出格式 | `text` |
-| `--lang en\|zh` | 输出语言 | `en` |
-| `--detail` | 显示扩展信息 | `false` |
+| 参数                            | 描述         | 默认值  |
+| ------------------------------- | ------------ | ------- |
+| `--format json\|text\|markdown` | 输出格式     | `text`  |
+| `--lang en\|zh`                 | 输出语言     | `en`    |
+| `--detail`                      | 显示扩展信息 | `false` |
 
 ## 示例
 
@@ -123,8 +123,8 @@ export default function TypeDemo() {
   return (
     <Flex gap="sm">
       <Button>Default</Button>
-      <Button btnType="primary">Primary</Button>
-      <Button btnType="outline">Outline</Button>
+      <Button variant="solid" color="primary">Primary</Button>
+      <Button variant="outline" color="primary">Outline</Button>
     </Flex>
   );
 }

apps/docs/guides/use-react-app.md

@@ -3,6 +3,7 @@ import { NpmIcon, YarnIcon, PnpmIcon, BunIcon } from './pkg-icons';
 import { HighlightedCode } from '../src/components/highlighted-code';
 
 export const CodeBlock = ({ children }) => (
+
   <div className="markdown__pre-container">
     <HighlightedCode className="language-bash">{children}</HighlightedCode>
   </div>
@@ -15,14 +16,14 @@ export const CodeBlock = ({ children }) => (
 ## Create a project
 
 <Tabs
-  animated={false}
-  defaultActiveKey="npm"
-  items={[
-    { key: 'npm', label: <span><NpmIcon />npm</span>, children: <CodeBlock>{'$ npm create vite@latest my-app -- --template react-ts\n$ cd my-app\n$ npm install'}</CodeBlock> },
-    { key: 'yarn', label: <span><YarnIcon />yarn</span>, children: <CodeBlock>{'$ yarn create vite my-app --template react-ts\n$ cd my-app\n$ yarn'}</CodeBlock> },
-    { key: 'pnpm', label: <span><PnpmIcon />pnpm</span>, children: <CodeBlock>{'$ pnpm create vite my-app --template react-ts\n$ cd my-app\n$ pnpm install'}</CodeBlock> },
-    { key: 'bun', label: <span><BunIcon />Bun</span>, children: <CodeBlock>{'$ bun create vite my-app --template react-ts\n$ cd my-app\n$ bun install'}</CodeBlock> },
-  ]}
+animated={false}
+defaultActiveKey="npm"
+items={[
+{ key: 'npm', label: <span><NpmIcon />npm</span>, children: <CodeBlock>{'$ npm create vite@latest my-app -- --template react-ts\n$ cd my-app\n$ npm install'}</CodeBlock> },
+{ key: 'yarn', label: <span><YarnIcon />yarn</span>, children: <CodeBlock>{'$ yarn create vite my-app --template react-ts\n$ cd my-app\n$ yarn'}</CodeBlock> },
+{ key: 'pnpm', label: <span><PnpmIcon />pnpm</span>, children: <CodeBlock>{'$ pnpm create vite my-app --template react-ts\n$ cd my-app\n$ pnpm install'}</CodeBlock> },
+{ key: 'bun', label: <span><BunIcon />Bun</span>, children: <CodeBlock>{'$ bun create vite my-app --template react-ts\n$ cd my-app\n$ bun install'}</CodeBlock> },
+]}
 />
 
 Start the dev server to verify everything works:
@@ -36,14 +37,14 @@ Open http://localhost:5173/ in your browser.
 ## Install tiny-design
 
 <Tabs
-  animated={false}
-  defaultActiveKey="npm"
-  items={[
-    { key: 'npm', label: <span><NpmIcon />npm</span>, children: <CodeBlock>$ npm install @tiny-design/react</CodeBlock> },
-    { key: 'yarn', label: <span><YarnIcon />yarn</span>, children: <CodeBlock>$ yarn add @tiny-design/react</CodeBlock> },
-    { key: 'pnpm', label: <span><PnpmIcon />pnpm</span>, children: <CodeBlock>$ pnpm add @tiny-design/react</CodeBlock> },
-    { key: 'bun', label: <span><BunIcon />Bun</span>, children: <CodeBlock>$ bun add @tiny-design/react</CodeBlock> },
-  ]}
+animated={false}
+defaultActiveKey="npm"
+items={[
+{ key: 'npm', label: <span><NpmIcon />npm</span>, children: <CodeBlock>$ npm install @tiny-design/react</CodeBlock> },
+{ key: 'yarn', label: <span><YarnIcon />yarn</span>, children: <CodeBlock>$ yarn add @tiny-design/react</CodeBlock> },
+{ key: 'pnpm', label: <span><PnpmIcon />pnpm</span>, children: <CodeBlock>$ pnpm add @tiny-design/react</CodeBlock> },
+{ key: 'bun', label: <span><BunIcon />Bun</span>, children: <CodeBlock>$ bun add @tiny-design/react</CodeBlock> },
+]}
 />
 
 Edit `src/App.tsx` to import a Button component from tiny-design:
@@ -54,7 +55,9 @@ import { Button } from 'tiny-design';
 const App = () => {
   return (
     <div style={{ padding: 24 }}>
-      <Button btnType="primary">Button</Button>
+      <Button variant="solid" color="primary">
+        Button
+      </Button>
     </div>
   );
 };

apps/docs/guides/use-react-app.zh_CN.md

@@ -3,6 +3,7 @@ import { NpmIcon, YarnIcon, PnpmIcon, BunIcon } from './pkg-icons';
 import { HighlightedCode } from '../src/components/highlighted-code';
 
 export const CodeBlock = ({ children }) => (
+
   <div className="markdown__pre-container">
     <HighlightedCode className="language-bash">{children}</HighlightedCode>
   </div>
@@ -15,14 +16,14 @@ export const CodeBlock = ({ children }) => (
 ## 创建项目
 
 <Tabs
-  animated={false}
-  defaultActiveKey="npm"
-  items={[
-    { key: 'npm', label: <span><NpmIcon />npm</span>, children: <CodeBlock>{'$ npm create vite@latest my-app -- --template react-ts\n$ cd my-app\n$ npm install'}</CodeBlock> },
-    { key: 'yarn', label: <span><YarnIcon />yarn</span>, children: <CodeBlock>{'$ yarn create vite my-app --template react-ts\n$ cd my-app\n$ yarn'}</CodeBlock> },
-    { key: 'pnpm', label: <span><PnpmIcon />pnpm</span>, children: <CodeBlock>{'$ pnpm create vite my-app --template react-ts\n$ cd my-app\n$ pnpm install'}</CodeBlock> },
-    { key: 'bun', label: <span><BunIcon />Bun</span>, children: <CodeBlock>{'$ bun create vite my-app --template react-ts\n$ cd my-app\n$ bun install'}</CodeBlock> },
-  ]}
+animated={false}
+defaultActiveKey="npm"
+items={[
+{ key: 'npm', label: <span><NpmIcon />npm</span>, children: <CodeBlock>{'$ npm create vite@latest my-app -- --template react-ts\n$ cd my-app\n$ npm install'}</CodeBlock> },
+{ key: 'yarn', label: <span><YarnIcon />yarn</span>, children: <CodeBlock>{'$ yarn create vite my-app --template react-ts\n$ cd my-app\n$ yarn'}</CodeBlock> },
+{ key: 'pnpm', label: <span><PnpmIcon />pnpm</span>, children: <CodeBlock>{'$ pnpm create vite my-app --template react-ts\n$ cd my-app\n$ pnpm install'}</CodeBlock> },
+{ key: 'bun', label: <span><BunIcon />Bun</span>, children: <CodeBlock>{'$ bun create vite my-app --template react-ts\n$ cd my-app\n$ bun install'}</CodeBlock> },
+]}
 />
 
 启动开发服务器，确认一切正常：
@@ -36,14 +37,14 @@ $ npm run dev
 ## 安装 tiny-design
 
 <Tabs
-  animated={false}
-  defaultActiveKey="npm"
-  items={[
-    { key: 'npm', label: <span><NpmIcon />npm</span>, children: <CodeBlock>$ npm install @tiny-design/react</CodeBlock> },
-    { key: 'yarn', label: <span><YarnIcon />yarn</span>, children: <CodeBlock>$ yarn add @tiny-design/react</CodeBlock> },
-    { key: 'pnpm', label: <span><PnpmIcon />pnpm</span>, children: <CodeBlock>$ pnpm add @tiny-design/react</CodeBlock> },
-    { key: 'bun', label: <span><BunIcon />Bun</span>, children: <CodeBlock>$ bun add @tiny-design/react</CodeBlock> },
-  ]}
+animated={false}
+defaultActiveKey="npm"
+items={[
+{ key: 'npm', label: <span><NpmIcon />npm</span>, children: <CodeBlock>$ npm install @tiny-design/react</CodeBlock> },
+{ key: 'yarn', label: <span><YarnIcon />yarn</span>, children: <CodeBlock>$ yarn add @tiny-design/react</CodeBlock> },
+{ key: 'pnpm', label: <span><PnpmIcon />pnpm</span>, children: <CodeBlock>$ pnpm add @tiny-design/react</CodeBlock> },
+{ key: 'bun', label: <span><BunIcon />Bun</span>, children: <CodeBlock>$ bun add @tiny-design/react</CodeBlock> },
+]}
 />
 
 修改 `src/App.tsx`，从 tiny-design 引入 Button 组件：
@@ -54,7 +55,9 @@ import { Button } from 'tiny-design';
 const App = () => {
   return (
     <div style={{ padding: 24 }}>
-      <Button btnType="primary">Button</Button>
+      <Button variant="solid" color="primary">
+        Button
+      </Button>
     </div>
   );
 };

apps/docs/public/llms-full.txt

@@ -249,21 +249,15 @@ export interface BreadcrumbItemProps
 import React from 'react';
 import { BaseProps, SizeType } from '../_utils/props';
 
-export type ButtonType =
-  | 'default'
-  | 'primary'
-  | 'outline'
-  | 'ghost'
-  | 'link'
-  | 'info'
-  | 'danger'
-  | 'warning'
-  | 'success';
+export type ButtonVariant = 'solid' | 'outline' | 'ghost' | 'link';
+
+export type ButtonColor = 'default' | 'primary' | 'info' | 'danger' | 'warning' | 'success';
 
 export interface ButtonProps
   extends BaseProps,
     React.PropsWithRef<JSX.IntrinsicElements['button']> {
-  btnType?: ButtonType;
+  variant?: ButtonVariant;
+  color?: ButtonColor;
   loading?: boolean;
   disabled?: boolean;
   block?: boolean;
@@ -275,7 +269,8 @@ export interface ButtonProps
 export interface ButtonGroupProps
   extends BaseProps,
     React.PropsWithRef<JSX.IntrinsicElements['div']> {
-  btnType?: ButtonType;
+  variant?: ButtonVariant;
+  color?: ButtonColor;
   size?: SizeType;
   round?: boolean;
   disabled?: boolean;
@@ -1905,7 +1900,7 @@ export interface SpeedDialActionProps
 ### split-button
 ```typescript
 import React from 'react';
-import { ButtonGroupProps, ButtonType } from '../button/types';
+import { ButtonColor, ButtonGroupProps, ButtonVariant } from '../button/types';
 import { DropdownPlacement, DropdownTrigger } from '../dropdown/types';
 import { MenuProps } from '../menu/types';
 import { SizeType } from '../_utils/props';
@@ -1915,7 +1910,8 @@ export interface SplitButtonProps extends Omit<ButtonGroupProps, 'onClick'> {
   loading?: boolean;
   disabled?: boolean;
   size?: SizeType;
-  btnType?: ButtonType;
+  variant?: ButtonVariant;
+  color?: ButtonColor;
   overlay?: React.ReactElement<MenuProps>;
   dropdownTrigger?: DropdownTrigger;
   dropdownPlacement?: DropdownPlacement;
@@ -2562,4 +2558,3 @@ export interface WaterfallProps<T = any>
 }
 
 ```
-

apps/docs/public/llms.txt

@@ -59,7 +59,7 @@ Components that accept sizes use: `'sm' | 'md' | 'lg'`
 ## Components
 
 ### Foundation
-- **Button** — Trigger operations. Props: `btnType` (`'default'|'primary'|'outline'|'ghost'|'link'|'info'|'danger'|'warning'|'success'`), `loading`, `disabled`, `block`, `size`, `round`, `icon`. Also: `Button.Group`.
+- **Button** — Trigger operations. Props: `variant` (`'solid'|'outline'|'ghost'|'link'`), `color` (`'default'|'primary'|'info'|'danger'|'warning'|'success'`), `loading`, `disabled`, `block`, `size`, `round`, `icon`. Also: `Button.Group`.
 - **Image** — Display images with preview support.
 - **Link** — Styled anchor element.
 - **Typography** — Headings, body text, lists. Prefer `Heading`, `Text`, `Paragraph`; compatibility entrypoints: `Typography.Heading`, `Typography.Text`, `Typography.Paragraph`.
@@ -192,7 +192,7 @@ import { SearchIcon, CloseIcon } from '@tiny-design/icons';
     <Input />
   </Form.Item>
   <Form.Item>
-    <Button btnType="primary" htmlType="submit">Submit</Button>
+    <Button variant="solid" color="primary" htmlType="submit">Submit</Button>
   </Form.Item>
 </Form>
 ```