组件
Button
用于主操作、次操作、工具栏按钮和图标按钮
Button
Button 是 @downcity/ui 里最基础的动作组件。
导入
import { Button } from "@downcity/ui";最小示例
import { Button } from "@downcity/ui";
export function SaveButton() {
return <Button size="sm">保存</Button>;
}常用变体
defaultoutlinesecondaryghostdestructivelink
常用尺寸
defaultxssmlgiconicon-xsicon-smicon-lg
图标按钮
import { Button } from "@downcity/ui";
import { SettingsIcon } from "lucide-react";
export function SettingsAction() {
return (
<Button size="icon-sm" variant="ghost" aria-label="打开设置">
<SettingsIcon />
</Button>
);
}使用建议
- 页面级主操作优先用
size="sm"或size="default" - 工具栏操作优先用
variant="ghost" - 危险操作优先用
variant="destructive" - 图标按钮优先用
icon-*尺寸，不要手动写w-* h-*
相关导出
ButtonbuttonVariants