React 组件

UGButton 按钮

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

导入方式

按需从包入口导入组件，并在应用入口引入一次样式文件。

tsx

import { UGButton } from '@ug666/ui-react'

变体预览

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

状态展示

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

尺寸展示

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

代码示例

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

tsx

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

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

Props

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