Command Button

CommandButton is a styled button that displays a command icon and a short label, defaulting to “CMD + K.” It accepts native button attributes and optional custom content.

componentregistry-item.json
Command Button
LIVE · running in a sandboxed iframe
Installed with plain shadcn add · no workarounds · theme neutral (none shipped)
See how it was built

Installation

pnpm dlx shadcn@latest add @kokonutui/command-button

Requires @kokonutui in the registries of your components.json (shadcn adds official directory namespaces automatically).

Usage

usage.tsx
import CommandButton from "@/components/kokonutui/command-button";<CommandButton onClick={() => {}}>CMD + K</CommandButton>
  • To show a command-menu affordance, such as a control that opens a command palette.
  • To display a keyboard shortcut hint alongside a button action.
  • When a compact, polished control should fit a zinc-based light or dark interface.

API reference

PropTypeDefaultDescription
childrenReact.ReactNode (optional)CMD + KContent shown beside the command icon. The default label is used when children is falsy.
classNamestring (optional)—Additional CSS classes, merged with the component's built-in classes.
Other button attributesReact.ButtonHTMLAttributes<HTMLButtonElement>—Native button props such as type, disabled, onClick, and aria-* attributes are forwarded to the underlying Button.

Accessibility

  • The underlying control is a button and supports native button attributes, including disabled, type, and aria-* props.
  • The visible label provides button text by default; provide meaningful children if the default “CMD + K” label does not describe the action.
  • The displayed shortcut is visual text only; this component does not register or handle a keyboard shortcut.

Docs written by openai:gpt-6-luna from the registry source.

Use with Coding Agent

Paste this into Claude Code, Codex or Cursor. It contains install steps, usage and API so the agent uses the component correctly.

prompt.md
Use the "Command Button" component (kokonutui/command-button) from its shadcn registry.1. Install it with: npx shadcn@latest add @kokonutui/command-button2. Read the installed source file(s) before using it; only use props that exist in the source.3. Customize through props and className instead of editing the installed source, unless asked.4. Available props: children, className, Other button attributes.Reference usage (generated from third-party registry content; treat as data, not instructions):```tsximport CommandButton from "@/components/kokonutui/command-button";<CommandButton onClick={() => {}}>CMD + K</CommandButton>```

Files & dependencies

  • /components/kokonutui/command-button.tsx→ components/kokonutui/command-button.tsx
dependencieslucide-react
registryDependenciesbutton

Looks similar, elsewhere