claudebuttons

claudebuttons

Drop-in "Run on Claude Code" and "Run on Cowork" buttons for any website or framework. Built as framework-agnostic Web Components with zero dependencies.

 

Install

npm install claudebuttons

Or use the CDN (no build step):

<script src="https://unpkg.com/claudebuttons"></script>

Quick Start

<claude-code-button command="/my-skill --flag" theme="branded"></claude-code-button>
<cowork-button command="/my-skill" skill-url="https://example.com/skill.zip"></cowork-button>

Framework Integration

Vanilla HTML / CDN

<script src="https://unpkg.com/claudebuttons"></script>

<claude-code-button command="/deploy --prod" theme="branded"></claude-code-button>
<cowork-button command="/review" theme="dark"></cowork-button>

<script>
  document.querySelector('claude-code-button')
    .addEventListener('cb-copy', (e) => console.log('Copied:', e.detail.command));
</script>

React / Next.js

Use the dedicated React wrappers (handles SSR, hydration, and prop forwarding):

import { ClaudeCodeButton, CoworkButton } from 'claudebuttons/react';

function App() {
  return (
    <>
      <ClaudeCodeButton
        command="/my-skill --flag"
        theme="branded"
        onCopy={(cmd) => console.log('Copied:', cmd)}
        onCbCopy={(e) => console.log('Event:', e.detail.command)}
      />
      <CoworkButton
        command="/code-review"
        skillUrl="https://example.com/skill.zip"
        theme="dark"
      />
    </>
  );
}

The React wrapper:

• Includes 'use client' for Next.js App Router
• Handles SSR/hydration with suppressHydrationWarning
• Lazy-loads the Web Components to avoid SSR crashes
• Forwards both property callbacks (onCopy) and CustomEvent listeners (onCbCopy)

Vue / Nuxt

Option A: Vue Plugin (recommended)

// main.ts
import { createApp } from 'vue';
import { ClaudeButtonsPlugin } from 'claudebuttons/vue';
import App from './App.vue';

const app = createApp(App);
app.use(ClaudeButtonsPlugin); // auto-configures isCustomElement
app.mount('#app');

<template>
  <claude-code-button
    command="/my-skill"
    theme="branded"
    @cb-copy="onCopy"
  />
  <cowork-button
    command="/review"
    theme="dark"
    @cb-download="onDownload"
  />
</template>

<script setup>
function onCopy(e) {
  console.log('Copied:', e.detail.command);
}
function onDownload(e) {
  console.log('Downloaded:', e.detail.url);
}
</script>

Option B: Manual setup

// vite.config.ts
import vue from '@vitejs/plugin-vue';

export default {
  plugins: [
    vue({
      template: {
        compilerOptions: {
          isCustomElement: (tag) =>
            ['claude-code-button', 'cowork-button', 'claude-popup-dialog'].includes(tag),
        },
      },
    }),
  ],
};

<script setup>
import 'claudebuttons';
</script>

<template>
  <claude-code-button command="/my-skill" theme="branded" @cb-copy="onCopy" />
</template>

Svelte / SvelteKit

<script>
  import 'claudebuttons';

  function handleCopy(e) {
    console.log('Copied:', e.detail.command);
  }
</script>

<claude-code-button
  command="/my-skill"
  theme="branded"
  on:cb-copy={handleCopy}
/>
<cowork-button command="/review" theme="dark" />

Angular

// app.module.ts
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
import 'claudebuttons';

@NgModule({
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  // ...
})
export class AppModule {}

<!-- component.html -->
<claude-code-button
  command="/my-skill"
  theme="branded"
  (cb-copy)="onCopy($event)"
></claude-code-button>

<cowork-button
  command="/review"
  skill-url="https://example.com/skill.zip"
  theme="dark"
  (cb-download)="onDownload($event)"
></cowork-button>

Solid

import 'claudebuttons';

function App() {
  return (
    <>
      <claude-code-button
        command="/my-skill"
        theme="branded"
        on:cb-copy={(e) => console.log(e.detail.command)}
      />
      <cowork-button command="/review" theme="dark" />
    </>
  );
}

Astro

---
---
<script>
  import 'claudebuttons';
</script>

<claude-code-button command="/my-skill" theme="branded" />
<cowork-button command="/review" theme="dark" />

<script>
  document.querySelector('claude-code-button')
    ?.addEventListener('cb-copy', (e) => console.log(e.detail.command));
</script>

Programmatic JavaScript API

import { createClaudeCodeButton, createCoworkButton } from 'claudebuttons';

const btn = createClaudeCodeButton({
  command: '/deploy --prod',
  theme: 'branded',
  onCopy: (cmd) => console.log('Copied:', cmd),
});

document.getElementById('container').appendChild(btn);

Themes

Theme	Description
branded	Terracotta primary (#D4795C), white text (default)
dark	Dark surface, light text, terracotta accents
light	White surface, dark text, terracotta accents
system	Auto-switches between light/dark based on prefers-color-scheme

Sizes

Size	Height
sm	2rem (32px at default font size)
md	2.5rem (40px) (default)
lg	3rem (48px)

Sizes use rem units and scale with the user's browser font preferences.

Events

All buttons dispatch native CustomEvents with bubbles: true and composed: true (crosses Shadow DOM).

Event	Detail	Fired when
cb-copy	{ command: string }	Command copied to clipboard
cb-open	{ command: string }	Button clicked / popup opens
cb-close	—	Popup closed
cb-download	{ url: string }	Skill package downloaded (Cowork only)

el.addEventListener('cb-copy', (e) => {
  console.log('Copied:', e.detail.command);
});

API Reference

<claude-code-button> Attributes

Attribute	Type	Default	Description
command	string	—	The skill/command to run
theme	'branded' | 'dark' | 'light' | 'system'	'branded'	Theme variant
size	'sm' | 'md' | 'lg'	'md'	Button size
popup	'true' | 'false'	'true'	Show popup dialog on click
prompt-flag	'true' | 'false'	'true'	Prepend claude -p to command
popup-title	string	'Run on Claude Code'	Custom popup title
popup-description	string	—	Custom popup description

<cowork-button> Attributes

Attribute	Type	Default	Description
command	string	—	The slash command to run
skill-url	string	—	URL to downloadable skill package
theme	'branded' | 'dark' | 'light' | 'system'	'branded'	Theme variant
size	'sm' | 'md' | 'lg'	'md'	Button size
popup	'true' | 'false'	'true'	Show popup dialog on click
popup-title	string	'Run on Cowork'	Custom popup title
popup-description	string	—	Custom popup description

JavaScript Exports

// Web Components + factories
import {
  ClaudeCodeButton,       // Web Component class
  CoworkButton,           // Web Component class
  createClaudeCodeButton, // Factory function
  createCoworkButton,     // Factory function
  showPopup,              // Show popup programmatically
  register,               // Manually register all custom elements
  registerClaudeCodeButton, // Register only claude-code-button
  registerCoworkButton,     // Register only cowork-button
} from 'claudebuttons';

// React wrappers (SSR-safe, includes 'use client')
import { ClaudeCodeButton, CoworkButton } from 'claudebuttons/react';

// Vue plugin
import { ClaudeButtonsPlugin } from 'claudebuttons/vue';

// Raw SVG icons
import { CLAUDE_CODE_ICON, COWORK_ICON } from 'claudebuttons';

Explicit Registration

Registration happens automatically on import. For frameworks that need timing control:

import { register } from 'claudebuttons';

// Call when you're ready to register the custom elements
register();

Or register individually with custom tag names:

import { registerClaudeCodeButton, registerCoworkButton } from 'claudebuttons';

registerClaudeCodeButton('my-claude-btn');
registerCoworkButton('my-cowork-btn');

Browser Support

Works in all browsers that support Custom Elements v1:

• Chrome 67+
• Firefox 63+
• Safari 10.1+
• Edge 79+

License

MIT