hermesbuttons — Demo · Hermes Agent palette

Variant

Filled / Outline / Ghost

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

Hermes (CLI)

filled

outline

ghost

Hermes Skills

filled

outline

ghost

Shape

Rounded / Pill / Square

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

Hermes

rounded

pill

square

Hermes Skills

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 (blue)

Default branded fill — electric blue (#2B8CFF), aligned with the Hermes Agent site.

Hermes — sizes

Hermes Skills — sizes

Theme

Branded Alt (periwinkle)

Secondary branded-alt — periwinkle (#8FA3E8) for pairing with the primary blue.

Filled

Outline

Mixed — branded + branded-alt

Mixed — filled + outline

Theme

Dark

For dark UIs — navy-wash surfaces with electric-blue accents.

Variants

filled

outline

ghost

Theme

Light

For light UIs — cool gray borders with electric-blue primary.

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 HermesButtons.createHermesButton() and HermesButtons.createHermesSkillButton().

Created via JavaScript

Events

Live Event Log

Click any button above — hb-copy, hb-open, hb-close, and hb-download bubble to document and are logged here.

Event listener

Click a button to see events...

Code

Quick Start

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

<!-- Hermes CLI (hermes -p "...") -->
<hermes-button
  command="/research deep-dive on React Server Components"
  theme="branded"
></hermes-button>

<!-- Hermes Skills + memory install flow -->
<hermes-skill-button
  command="/competitive-analysis"
  skill-url="https://example.com/skills/competitive-analysis.zip"
  variant="outline"
></hermes-skill-button>

<!-- Teal accent theme -->
<hermes-button
  command="/draft-blog-post"
  theme="branded-alt"
></hermes-button>

import { HermesButton, HermesSkillButton } from 'hermesbuttons/react';

function App() {
  return (
    <>
      <HermesButton
        command="/research deep-dive on React Server Components"
        onCopy={(cmd) => console.log('Copied:', cmd)}
        onHbCopy={(e) => console.log('Event:', e.detail.command)}
      />
      <HermesSkillButton
        command="/competitive-analysis"
        skillUrl="https://example.com/skills/competitive-analysis.zip"
        variant="outline"
      />
    </>
  );
}

// main.ts
import { createApp } from 'vue';
import { HermesButtonsPlugin } from 'hermesbuttons/vue';
import App from './App.vue';

const app = createApp(App);
app.use(HermesButtonsPlugin);
app.mount('#app');

<!-- App.vue -->
<hermes-button
  command="/weekly-standup"
  @hb-copy="onCopy"
/>
<hermes-skill-button
  command="/draft-blog-post"
  skill-url="https://example.com/skills/draft-blog.zip"
  @hb-download="onDownload"
/>

<script>
  import 'hermesbuttons';

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

<hermes-button
  command="/research deep-dive on React Server Components"
  on:hb-copy={handleCopy}
/>

<hermes-skill-button
  command="/competitive-analysis"
  skill-url="https://example.com/skills/competitive-analysis.zip"
  variant="ghost"
/>