@srcube-ui/button

跨 React 与微信小程序的按钮组件。

包暴露

• @srcube-ui/button / @srcube-ui/button/style：基础样式与类型定义
• @srcube-ui/button/react：React 组件（Button、ButtonGroup）
• @srcube-ui/button/mini：微信小程序组件（s-button、s-button-group）

React 快速上手

import { Button, ButtonGroup } from '@srcube-ui/button/react';

function Example() {
  return (
    <div className="space-y-3">
      <Button onTap={() => console.log('tap')} variant="outline">
        Outline
      </Button>
      <Button isLoading="auto" onTap={() => new Promise((r) => setTimeout(r, 800))}>
        Auto Loading
      </Button>

      <ButtonGroup color="primary" radius="md">
        <Button color="danger">Danger</Button>
        <Button>Default</Button>
        <Button isIcon>
          <span className="i-[ion--heart]" />
        </Button>
      </ButtonGroup>
    </div>
  );
}

要点：

• 交互事件是 onTap（而非原生 onClick），支持 isLoading="auto" 自动等待 Promise。
• ButtonGroup 自动注入圆角/分隔样式，无需额外 class。

小程序使用

page.json / index.json 注册：

{
  "usingComponents": {
    "s-button": "@srcube-ui/button/mini/index",
    "s-button-group": "@srcube-ui/button/mini/button-group/index"
  }
}

单独按钮：

<s-button class="flex justify-center w-full" bind:tap="handleTap" variant="flat">
  点击
</s-button>

按钮组（注意：在小程序里每个 s-button 是独立节点，想要等分需要给子项加 flex 类）：

<s-button-group class="flex justify-center w-full" color="primary" fullWidth="{{true}}">
  <s-button class="flex-1" bind:tap="handleTap" data-label="Left">Left</s-button>
  <s-button class="flex-1" bind:tap="handleTap" data-label="Middle">Middle</s-button>
  <s-button class="flex-1" bind:tap="handleTap" data-label="Right">Right</s-button>
</s-button-group>

自动 Loading（绑定事件时通过 e.detail.wait 注入 Promise）：

<s-button isLoading="auto" bind:tap="handleAsyncTap">提交</s-button>

Page({
  async handleAsyncTap(e) {
    const task = new Promise((resolve) => setTimeout(resolve, 1200));
    e.detail.wait?.(task);
    await task;
  },
});

可用属性（核心）

• color: default | primary | secondary | success | warning | danger
• variant: solid | outline | flat | text
• size: xs | sm | md | lg
• radius: none | sm | md | lg | full
• fullWidth: boolean
• 状态：isIcon（去除左右 padding）、isDisabled、isLoading（true | false | 'auto'）

React 与小程序的属性命名保持一致；小程序事件前缀为 bind:，React 使用驼峰。