React 组件

UGButton 按钮

UGButton 用于触发页面的主次操作，支持标准主流色彩体系、形状与加载块级状态。

导入方式

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

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

基础与功能色变体

蓝绿主色配合主流 UI 框架标准的成功绿、警告橙、危险红、信息蓝与白底灰框默认按钮。

形状与图标展示

支持正圆图标按钮 (circle) 与胶囊圆角按钮 (round)。

状态展示

展示 loading 与 disabled 等业务交互状态。

尺寸展示

支持 sm (28px)、default (36px)、lg (44px) 标高规格。

块级全宽按钮

开启 block 属性后撑满容器宽度。

代码示例

适配常见工具栏与表单提交示例。

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

export function ToolbarActions() {
  return (
    <div className="flex gap-3">
      <UGButton variant="primary">确认提交</UGButton>
      <UGButton variant="success">成功通过</UGButton>
      <UGButton variant="warning">警告提醒</UGButton>
      <UGButton variant="danger">删除数据</UGButton>
      <UGButton variant="default">默认取消</UGButton>
      <UGButton variant="dashed">
        <Plus size={16} />
        添加项目
      </UGButton>
    </div>
  )
}

属性

属性类型默认值说明
variant'primary' | 'success' | 'warning' | 'danger' | 'info' | 'default' | 'secondary' | 'dashed' | 'text' | 'link''default'设置按钮视觉类型。primary 为配置蓝绿主色，其余功能色对齐主流框架。
size'default' | 'sm' | 'lg' | 'icon''default'控制按钮尺寸与密度。
shape'default' | 'circle' | 'round''default'控制按钮形状：标准微圆角 / 正圆 / 胶囊圆角。
blockbooleanfalse是否为 100% 块级宽度按钮。
loadingbooleanfalse进入加载态后显示 Spinner 并自动禁用点击。
disabledbooleanfalse禁用点击与焦点交互。