AI导哈

按钮组件库

一个基于React、TypeScript和Tailwind CSS构建的全面且可访问的按钮组件库，适用于各种Web应用场景。

  • by Vukurutu
  • TypeScript
  • 本地部署
  • 更新于
在 GitHub 查看 Vukurutu/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 (
    <div>
      <Button variant="primary">Click me</Button>
    </div>
  );
}

带图标

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

function App() {
  return (
    <Button variant="primary" leftIcon={<PlusIcon />}>
      Add Item
    </Button>
  );
}

加载状态

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

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

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

  return (
    <Button variant="primary" loading={loading} onClick={handleSubmit}>
      Submit
    </Button>
  );
}

破坏性行动

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

function App() {
  return (
    <Button variant="primary" destructive>
      Delete Account
    </Button>
  );
}

属性

道具 类型 默认值 描述
variant 'primary' | 'secondary' | 'outline' | 'ghost' | 'link' | 'linkSecondary' 'primary' 视觉风格变体
size 'sm' | 'md' 'md' 按钮尺寸
destructive boolean false 应用破坏性（红色）配色方案
loading boolean false 显示加载微调器并禁用按钮
leftIcon ReactNode - 左侧显示的图标
rightIcon ReactNode - 右侧显示图标
disabled boolean false 禁用该按钮
className string - 其他CSS类
aria-label string - 辅助功能标签
children ReactNode - 按钮内容

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

变体

主要的，重要的

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

<Button variant="primary">Primary Action</Button>

次要的

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

<Button variant="secondary">Secondary Action</Button>

大纲

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

<Button variant="outline">Outline Action</Button>

幽灵

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

<Button variant="ghost">Ghost Action</Button>

链接

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

<Button variant="link">Link Action</Button>

链接次要

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

<Button variant="linkSecondary">Link Secondary</Button>

尺寸

中等（默认）

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

<Button size="md">Medium Button</Button>

小

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

<Button size="sm">Small Button</Button>

无障碍

按钮组件遵循WCAG AA指南：

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

ARIA标签示例

<Button
  variant="primary"
  leftIcon={<PlusIcon />}
  aria-label="Add new item to shopping cart"
/>

样式

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

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

自定义样式

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

<Button variant="primary" className="w-full shadow-lg">
  Full Width Button
</Button>

部件结构

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

Figma设计来源

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

许可证

麻省理工学院

相关 MCP