v1.0.3

clawbuttons

Drop-in buttons for the entire OpenClaw harness ecosystem — OpenClaw, Hermes, IronClaw, NanoClaw, ZeroClaw, OpenHarness, and ClaudeClaw. Framework-agnostic Web Components with zero dependencies.

$ npm i clawbuttons

All 7 harnesses

Agent & crawler friendly. Every button embeds a hidden crawlable <a> link in the light DOM — skill URLs are directly discoverable by scrapers, search engines, and AI agents. Call injectStructuredData() to emit Schema.org JSON‑LD for the whole page.

Harness catalog

Tag name, CLI prefix, brand color, and one-line description for each harness — same layout as the README table, as browsable cards.

OpenClaw

Tag <openclaw-button>
CLI openclaw -p
Color #E74C3C

Open-source agent platform with multi-channel support and skill marketplace.

Hermes

Tag <hermes-button>
CLI hermes -p
Color #9B59B6

Persistent personal agent with long-term memory and reusable skills.

IronClaw

Tag <ironclaw-button>
CLI ironclaw agent
Color #5D6D7E

Rust-based, privacy-first assistant with WASM sandboxes and MCP.

NanoClaw

Tag <nanoclaw-button>
CLI claw
Color #1ABC9C

Minimal container-based agent with OS-enforced isolation.

ZeroClaw

Tag <zeroclaw-button>
CLI zeroclaw agent
Color #E67E22

Fast Rust + WASM runtime with a tiny memory footprint.

OpenHarness

Tag <openharness-button>
CLI oh
Color #27AE60

Lightweight Python harness with many tools and streaming tool-calls.

ClaudeClaw

Tag <claudeclaw-button>
CLI claudeclaw
Color #D4795C

Claude Code wrapper with daemon mode and chat channels.

Filled & outline lineup

Primary (filled) and secondary (outline) for every harness — quick visual scan of the full set.

The Full Lineup
Outline Variants

Filled / Outline / Ghost — every harness

Same three variants as claudebuttons / hermesbuttons: variant="filled" (default), outline, and ghost. One card per harness.

OpenClaw
filled
outline
ghost
Hermes
filled
outline
ghost
IronClaw
filled
outline
ghost
NanoClaw
filled
outline
ghost
ZeroClaw
filled
outline
ghost
OpenHarness
filled
outline
ghost
ClaudeClaw
filled
outline
ghost

Rounded / Pill / Square — all harnesses

shape="rounded" (default), pill, or square on any tag. Below: one card per harness.

OpenClaw
rounded
pill
square
Hermes
rounded
pill
square
IronClaw
rounded
pill
square
NanoClaw
rounded
pill
square
ZeroClaw
rounded
pill
square
OpenHarness
rounded
pill
square
ClaudeClaw
rounded
pill
square
Shape + variant (mixed)

Small / Medium / Large — all harnesses

size="sm", md, or lg on every element.

OpenClaw
sm
md
lg
Hermes
sm
md
lg
IronClaw
sm
md
lg
NanoClaw
sm
md
lg
ZeroClaw
sm
md
lg
OpenHarness
sm
md
lg
ClaudeClaw
sm
md
lg

Branded alt

Secondary purple accent via theme="branded-alt" — useful when pairing two actions on the same row (mirrors claudebuttons).

Filled
Outline
More harnesses

Dark

For dark UIs — dark surface with colored accents per harness.

Dark theme across harnesses

Light

For light UIs — white surface with colored accents.

Light theme across harnesses

System

Uses prefers-color-scheme — light or dark tokens per harness automatically.

All harnesses · theme="system"

Side by Side

Mix different harness buttons to let users choose their preferred agent.

Primary + Secondary
Three-way choice

Skill URL — every harness

Attach skill-url on any harness; crawlable links stay in the light DOM (same pattern as claudebuttons / hermesbuttons).

OpenClaw
Hermes
IronClaw
NanoClaw
ZeroClaw
OpenHarness
ClaudeClaw

Programmatic

One call per harness: ClawButtons.createButton('openclaw' | 'hermes' | …, options).

All harness IDs via createButton

Live Event Log

Click any button above — all cb-copy, cb-open, and cb-close events are logged here.

Event listener
Click a button to see events...

Quick Start

<!-- CDN — no build step --> <script src="https://unpkg.com/clawbuttons"></script> <!-- OpenClaw button --> <openclaw-button command="Deploy the full-stack app" ></openclaw-button> <!-- Hermes button with skill URL --> <hermes-button command="/research-agent" skill-url="https://example.com/skill.zip" variant="outline" ></hermes-button> <!-- Any harness works the same way --> <ironclaw-button command="Audit security"></ironclaw-button> <nanoclaw-button command="Container test"></nanoclaw-button> <zeroclaw-button command="WASM benchmark"></zeroclaw-button> <openharness-button command="Run agent"></openharness-button> <claudeclaw-button command="Start daemon"></claudeclaw-button>
import { OpenClawButton, HermesButton, IronClawButton, NanoClawButton, ZeroClawButton, OpenHarnessButton, ClaudeClawButton, } from 'clawbuttons/react'; function App() { return ( <> <OpenClawButton command="Deploy the full-stack app" onCopy={(cmd) => console.log('Copied:', cmd)} /> <HermesButton command="/deep-research" variant="outline" /> <IronClawButton command="Security audit" theme="dark" /> </> ); }
<script setup> import { ClawButtonsPlugin } from 'clawbuttons/vue'; function onCopy(e) { console.log('Copied:', e.detail.command); } </script> <template> <openclaw-button command="Deploy the full-stack app" @cb-copy="onCopy" /> <hermes-button command="/research" variant="outline" /> </template>
<script> import 'clawbuttons'; function handleCopy(e) { console.log('Copied:', e.detail.command); } </script> <openclaw-button command="Deploy the full-stack app" on:cb-copy={handleCopy} /> <hermes-button command="/research" variant="ghost" />