UG666

UG666 UI
@ug666/react 文档演示

Button 按钮

Button 用于触发页面的主次操作，支持多种视觉风格、尺寸与加载状态。

导入方式

所有示例均直接使用 @ug666/react 中的真实组件导出。

import { Button } from '@ug666/react'

变体预览

覆盖默认、描边、次级、幽灵、链接与危险操作场景。

状态展示

展示 loading 与 disabled 等常见业务状态。

尺寸展示

适配工具栏、弹窗脚部与图标按钮等不同密度界面。

代码示例

下面示例适合放在列表页工具栏中。

import { Download } from 'lucide-react'
import { Button } from '@ug666/react'

export function ToolbarActions() {
  return (
    <div className="flex gap-3">
      <Button>保存变更</Button>
      <Button variant="outline">
        <Download size={16} />
        导出数据
      </Button>
      <Button variant="destructive" loading>
        删除中
      </Button>
    </div>
  )
}

Props 说明

属性类型默认值说明
variant'default' | 'destructive' | 'outline' | 'secondary' | 'ghost' | 'link''default'设置按钮的视觉风格。
size'default' | 'sm' | 'lg' | 'icon''default'控制按钮高度、内边距与图标布局。
loadingbooleanfalse进入加载态后显示旋转图标并自动禁用按钮。
disabledbooleanfalse禁用点击与焦点交互。