SuperAPI AI 工具集

shadcn-syntax-button

测试与质量

查看项目

更新于 10-15 22:18

技能介绍

用途:指导在 shadcn UI 项目中添加、定制或调试 Button 组件,并作为理解其他 cva 变体原语(Badge、Alert、Toggle 等)的参考。

主要能力:提供 variant 与 size 的决策表与决策树,按用户意图而非视觉风格选择;variant 与 size 为独立属性,默认均为 default。variant 含 default、destructive、outline、secondary、ghost、link;size 含 default、sm、lg、icon,Tailwind v4 另有 xs、icon-xs、icon-sm、icon-lg。

使用方式:从本地别名导入,如 import { Button } from "@/components/ui/button",再以 <Button variant="default" size="default">Save</Button> 调用。asChild 为 true 时只能有一个子元素,用于把按钮样式套到 Link 或 a 上;图标按钮用 size="icon" 并提供 aria-label;加载按钮用 disabled 配合 Loader2 与 animate-spin。className 直接透传,由 cn 与 twMerge 处理冲突。

适用场景:表单、对话框、工具栏、表格行、导航链接等按钮设计。

限制:Button 在 v3 与 v4 中均为 RSC 安全,不应添加 "use client";v3 与 v4 的焦点环写法不同,不可混用;asChild 传多个子元素会抛错;不要手写拼接 className 或手抄 variant 类名。具体像素值与类名以本地源码为准。