claudebuttons

Variant

Filled / Outline / Ghost

Three visual variants per button. Use variant="outline" or variant="ghost" for secondary actions or side-by-side differentiation.

Claude Code

filled

outline

ghost

Cowork

filled

outline

ghost

Shape

Rounded / Pill / Square

Control the border radius with shape="pill" or shape="square". Default is rounded.

Claude Code

rounded

pill

square

Cowork

rounded

pill

square

Shape + Variant combos

Pairing

Side by Side

Mix variants to visually differentiate buttons when placed together.

Filled + Outline

Filled + Ghost

Theme

Branded

The default theme — terracotta background matching Claude's brand palette.

Claude Code — sizes

Cowork — sizes

Theme

Branded Alt

A secondary branded theme in purple — great for mixing with the default terracotta to differentiate two buttons at a glance.

Filled

Outline

Mixed — branded + branded-alt

Mixed — branded filled + branded-alt outline

Theme

Dark

For dark UIs — dark surface with terracotta accents and icons.

Variants

filled

outline

ghost

Theme

Light

For light UIs — white surface with terracotta accents.

Variants

filled

outline

ghost

Theme

System

Automatically switches between light and dark based on your OS preference.

Auto-detects prefers-color-scheme

API

Programmatic

Buttons created via createClaudeCodeButton() and createCoworkButton().

Created via JavaScript

Events

Live Event Log

Click any button above — cb-copy, cb-open, cb-close, cb-download, and cb-launch-desktop are logged here. The hero Cowork button uses auto-launch to open Claude Desktop when the dialog opens (when supported).

Event listener

Click a button to see events...

Code

Quick Start

<!-- CDN — no build step -->
<script src="https://unpkg.com/claudebuttons"></script>

<!-- Filled (default) -->
<claude-code-button
  command="Clone and set up the monorepo with all dependencies"
></claude-code-button>

<!-- Outline variant -->
<cowork-button
  command="/code-review"
  variant="outline"
></cowork-button>

<!-- Purple branded alt -->
<cowork-button
  command="/content-calendar"
  theme="branded-alt"
></cowork-button>

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

function App() {
  return (
    <>
      {/* Primary + secondary variant pairing */}
      <ClaudeCodeButton
        command="Scaffold a Next.js app with auth and database"
        onCopy={(cmd) => console.log('Copied:', cmd)}
      />
      <CoworkButton
        command="/code-review"
        variant="outline"
      />

      {/* Purple alt theme */}
      <CoworkButton
        command="/content-calendar"
        theme="branded-alt"
      />
    </>
  );
}

<script setup>
import { ClaudeButtonsPlugin } from 'claudebuttons/vue';

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

<template>
  <claude-code-button
    command="Scaffold a Next.js app with auth and database"
    @cb-copy="onCopy"
  />
  <cowork-button
    command="/code-review"
    variant="outline"
  />
</template>

<script>
  import 'claudebuttons';

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

<claude-code-button
  command="Scaffold a Next.js app with auth and database"
  on:cb-copy={handleCopy}
/>

<!-- Ghost variant for secondary action -->
<cowork-button
  command="/code-review"
  variant="ghost"
/>