Command Buttons

Add beautiful, customizable buttons to your VS Code status bar that run your most-used commands with a single click.

Quick Start

Create a .command-buttons.json file at the root of your workspace:

{
  "buttons": [
    {
      "icon": "rocket",
      "color": "#00ffcc",
      "text": "Dev",
      "command": "npm run dev"
    }
  ]
}

That's it! Your button will appear in the status bar, ready to launch your dev server.

Configuration

Required Fields

💡 Find available icons at VS Code Codicons

Optional Fields

Examples

Basic Setup

Perfect for single-package projects:

{
  "buttons": [
    {
      "icon": "rocket",
      "color": "#00ffcc",
      "text": "Dev",
      "command": "npm run dev"
    },
    {
      "icon": "package",
      "color": "rgba(255, 153, 0, 1)",
      "text": "Build",
      "command": "npm run build"
    },
    {
      "icon": "beaker",
      "color": "#00ff00",
      "text": "Test",
      "command": "npm test"
    }
  ]
}

Grouped Terminals

Run related commands in the same terminal using terminalName:

{
  "buttons": [
    {
      "icon": "rocket",
      "color": "#00ffcc",
      "text": "Dev",
      "command": "npm run dev",
      "terminalName": "Dev Server"
    },
    {
      "icon": "refresh",
      "color": "#00ffcc",
      "text": "Restart",
      "command": "npm run dev",
      "terminalName": "Dev Server"
    },
    {
      "icon": "beaker",
      "color": "#ff6b6b",
      "text": "Test",
      "command": "npm test",
      "terminalName": "Tests"
    },
    {
      "icon": "eye",
      "color": "#ff6b6b",
      "text": "Watch",
      "command": "npm run test:watch",
      "terminalName": "Tests"
    }
  ]
}

Dev and Restart share the "Dev Server" terminal, while Test and Watch share the "Tests" terminal.

Monorepo Configuration

Target specific packages in your monorepo:

{
  "buttons": [
    {
      "icon": "globe",
      "color": "#61DAFB",
      "text": "Web",
      "directory": "packages/web",
      "command": "npm run dev"
    },
    {
      "icon": "server",
      "color": "#68A063",
      "text": "API",
      "directory": "packages/api",
      "command": "npm run dev"
    },
    {
      "icon": "database",
      "color": "#336791",
      "text": "DB",
      "directory": "packages/database",
      "command": "npm run migrate"
    }
  ]
}

Icon-Only Buttons

Save space in your status bar:

{
  "buttons": [
    {
      "icon": "play",
      "color": "#4CAF50",
      "command": "npm start"
    },
    {
      "icon": "debug-stop",
      "color": "#f44336",
      "command": "npm run stop"
    },
    {
      "icon": "refresh",
      "color": "#2196F3",
      "command": "npm run restart"
    }
  ]
}

Python Projects

{
  "buttons": [
    {
      "icon": "play",
      "color": "#3776AB",
      "text": "Run",
      "command": "python main.py"
    },
    {
      "icon": "package",
      "color": "#FFD43B",
      "text": "Install",
      "command": "pip install -r requirements.txt"
    },
    {
      "icon": "beaker",
      "color": "#0A9396",
      "text": "Test",
      "command": "pytest"
    },
    {
      "icon": "check",
      "color": "#94D2BD",
      "text": "Lint",
      "command": "flake8 . && black --check ."
    }
  ]
}

Docker Workflows

{
  "buttons": [
    {
      "icon": "vm",
      "color": "#2496ED",
      "text": "Docker Up",
      "command": "docker-compose up -d"
    },
    {
      "icon": "debug-stop",
      "color": "#DC382D",
      "text": "Docker Down",
      "command": "docker-compose down"
    },
    {
      "icon": "refresh",
      "color": "#FFA500",
      "text": "Rebuild",
      "command": "docker-compose up -d --build"
    }
  ]
}

Git Shortcuts

{
  "buttons": [
    {
      "icon": "git-pull-request",
      "color": "#F05032",
      "command": "git pull"
    },
    {
      "icon": "cloud-upload",
      "color": "#28A745",
      "command": "git push"
    },
    {
      "icon": "git-branch",
      "color": "#6E5494",
      "command": "git status"
    }
  ]
}

Database Operations

{
  "buttons": [
    {
      "icon": "database",
      "color": "#4479A1",
      "text": "Migrate",
      "command": "npx prisma migrate dev"
    },
    {
      "icon": "symbol-field",
      "color": "#00758F",
      "text": "Seed",
      "command": "npx prisma db seed"
    },
    {
      "icon": "console",
      "color": "#E38C00",
      "text": "Studio",
      "command": "npx prisma studio"
    }
  ]
}

Shell Scripts & Build Tools

{
  "buttons": [
    {
      "icon": "terminal",
      "color": "#89B4FA",
      "text": "Setup",
      "command": "bash scripts/setup.sh"
    },
    {
      "icon": "wand",
      "color": "#B4BEFE",
      "text": "Generate",
      "command": "./scripts/codegen.sh"
    },
    {
      "icon": "tools",
      "color": "#F5C2E7",
      "text": "Make",
      "command": "make build"
    },
    {
      "icon": "symbol-namespace",
      "color": "#CBA6F7",
      "text": "Gradle",
      "command": "./gradlew build"
    }
  ]
}

File Operations & Utilities

{
  "buttons": [
    {
      "icon": "trash",
      "color": "#EE5A6F",
      "text": "Clean",
      "command": "rm -rf dist/ && rm -rf node_modules/.cache"
    },
    {
      "icon": "folder-opened",
      "color": "#F9E2AF",
      "text": "Open Logs",
      "command": "code logs/"
    },
    {
      "icon": "file-zip",
      "color": "#FAB387",
      "text": "Archive",
      "command": "tar -czf backup-$(date +%Y%m%d).tar.gz src/"
    }
  ]
}

Features

• Live Reload - Buttons automatically update when you edit the config file
• Terminal Integration - Commands run in VS Code's integrated terminal or Ghostty
• Ghostty Support - Execute commands in the Ghostty terminal emulator (macOS)
• Terminal Grouping - Group related commands into separate terminals using terminalName
• Flexible Styling - Use any color format (hex, rgb, named colors)
• Workspace Specific - Different button configurations per project

Extension Settings

This extension contributes the following settings:

Terminal Settings

Note: When using Ghostty, the following settings are not supported due to macOS limitations: reuseTerminal, focusTerminalOnRun, showCommandRunningIndicator, and the terminalName config field. Each command opens a new Ghostty window.

Notification Settings

UI Settings

Configuration File Settings

Happy coding! 🎉