ChromeButton

Default

With Leading Icon

With Trailing Kbd Hint

Primary Variant

Topbar Composition

Installation

npx visor add chrome-button

This copies two files into your project:

• components/ui/chrome-button/chrome-button.tsx — the component
• components/ui/chrome-button/chrome-button.module.css — the styles

ChromeButton depends on Kbd, which the CLI will install automatically if missing.

Usage

import { ChromeButton } from '@/components/ui/chrome-button/chrome-button';
import { MagnifyingGlass, Plus } from '@phosphor-icons/react';

export default function Topbar() {
  return (
    <div>
      <ChromeButton
        icon={<MagnifyingGlass size={14} weight="regular" />}
        keys={['⌘', 'K']}
        onClick={() => openCommandPalette()}
      >
        Search
      </ChromeButton>
      <ChromeButton
        variant="primary"
        icon={<Plus size={14} weight="bold" />}
        onClick={() => createEvent()}
      >
        New event
      </ChromeButton>
    </div>
  );
}

When to Use

• Topbar actions in admin shells (Search, Filter, Group, Density, primary "New X")
• Toolbar rows where Button at 32px is too tall for the chrome density
• Any chrome row that pairs an action with a keyboard-shortcut hint inline

When Not to Use

• Primary body-content CTAs — use Button at default 40px or size="sm" (32px)
• Standalone keyboard-shortcut display without an action — use Kbd directly
• Destructive confirmations — use Button variant="destructive"

API Reference

No props data available for “chrome-button”.

The component also accepts all standard HTML <button> attributes (e.g. aria-label for icon-only usage, disabled, onClick).