按钮 Button

<button class="xxd-btn" data-variant="primary">写入 X</button>
<button class="xxd-btn">保存草稿</button>
<button class="xxd-btn" data-variant="ghost">稍后</button>
<button class="xxd-btn" data-variant="danger">删除</button>
<button class="xxd-btn" data-variant="outline">导出</button>
<button class="xxd-btn" data-size="xs">xs</button>

export function ButtonDemo() {
  return (
    <div className="flex flex-wrap items-center gap-2">
      <Button variant="primary">写入 X</Button>
      <Button>保存草稿</Button>
      <Button variant="ghost">稍后</Button>
      <Button variant="outline">导出</Button>
      <Button variant="destructive">删除</Button>
      <Button loading>正在生成…</Button>
    </div>
  );
}

<button class="xxd-btn" data-size="xs">xs</button>
<button class="xxd-btn" data-size="sm">sm</button>
<button class="xxd-btn">md</button>
<button class="xxd-btn" data-size="lg">lg</button>

<button class="xxd-btn" data-icon-only aria-label="搜索" data-tooltip="搜索 ⌘F"><i data-xxd-icon="Search"></i></button>
<button class="xxd-btn" data-icon-only data-shape="round" aria-label="新建" data-tooltip="新建"><i data-xxd-icon="Plus"></i></button>
<button class="xxd-btn" data-variant="ghost" data-icon-only aria-label="更多" data-tooltip="更多"><i data-xxd-icon="Ellipsis"></i></button>

<div class="xxd-cluster" data-finish-preview="flat"><button class="xxd-btn" data-variant="primary">写入 X</button><button class="xxd-btn" data-variant="danger">删除</button></div>

<button class="xxd-btn" data-variant="primary" onclick="Xxd.runBusy(this, () => new Promise((r) => setTimeout(r, 1200)))"><i data-xxd-icon="Save" data-size="16"></i>保存</button>