Design System MCP Teste 1

设计系统-按钮组件

基于Figma的shadcn/ui设计系统，使用React、TypeScript和Tailwind CSS构建的全面、可访问的Button组件。

特性

• ✅ 6视觉变体：小学、中学、大纲、幽灵、链接和链接中学
• ✅ 2尺寸：小型（sm）和中型（md）
• ✅ 多个状态：正常、悬停、聚焦、禁用和加载
• ✅ 破坏性模式：红色配色方案用于危险行为
• ✅ 图标支持：左右图标槽
• ✅ 完全打字：完整的TypeScript定义
• ✅ 符合WCAG AA标准：可通过适当的ARIA属性访问
• ✅ 顺风 CSS：实用性优先的造型方法
• ✅ JSDoc文件：全面的内联文档

安装

确保安装了以下依赖项：

npm install react react-dom
npm install -D typescript @types/react @types/react-dom
npm install -D tailwindcss postcss autoprefixer

用法

基础示例

import { Button } from './components/Button';

function App() {
  return (
    

      Click me
    

  );
}

带图标

import { Button } from './components/Button';
import { PlusIcon } from './icons';

function App() {
  return (
    
      Add Item
    
  );
}

加载状态

import { Button } from './components/Button';

function App() {
  const [loading, setLoading] = useState(false);

  const handleSubmit = async () => {
    setLoading(true);
    await submitForm();
    setLoading(false);
  };

  return (
    
      Submit
    
  );
}

破坏性行动

import { Button } from './components/Button';

function App() {
  return (
    
      Delete Account
    
  );
}

属性

还支持所有标准HTML按钮属性。

变体

主要的，重要的

纯深色背景，浅色文字。最适合初级行动。

Primary Action

次要的

浅色背景，深色文字。用于次要操作。

Secondary Action

大纲

白色背景，带边框。微妙、非侵入性的行为。

Outline Action

幽灵

没有背景，只有文字。最小的视觉重量。

Ghost Action

链接

悬停时样式为带下划线的链接。

Link Action

链接次要

带有柔和颜色的次要链接样式。

Link Secondary

尺寸

中等（默认）

标准按钮大小：40px高，带适当的填充。

Medium Button

小

紧凑型按钮：36像素高，可调整填充。

Small Button

无障碍

按钮组件遵循WCAG AA指南：

• 键盘导航：完全支持键盘输入和空格键
• 焦点指示器：使用可见聚焦环 focus-visible
• ARIA属性：适当 aria-disabled, aria-busy，以及 aria-label 支持
• 禁用状态：禁用或加载时阻止交互
• 色彩对比：所有颜色组合均符合WCAG AA对比度要求

ARIA标签示例

样式

该组件使用Tailwind CSS实用程序类。确保你的 tailwind.config.js 包括组件路径：

module.exports = {
  content: [
    './src/**/*.{js,jsx,ts,tsx}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

自定义样式

您可以使用扩展样式 className 道具：

  Full Width Button

部件结构

src/
├── components/
│   ├── Button.tsx           # Main component
│   └── Button.example.tsx   # Usage examples
└── README.md               # This file

Figma设计来源

该组件基于 shadcn/ui设计系统 来自Figma社区。

许可证

麻省理工学院