VibeUI

Buttons

Command Button

A command button with a shortcut hint: real keycaps on the right that press down on hover. Self-contained — one file, no dependencies.

  • button
  • command
  • shortcut
  • keyboard
  • search

Preview

1440pxHost theme

Use it with AI

  1. 1. Copy the link.
  2. 2. Write to your agent in your own words and drop the link into the sentence.
  3. 3. The agent opens the link and installs the component from the registry.
Show the full instructions

What the link says, spelled out. Use it when your agent cannot open links — paste this text instead.

# Install and place "button-008" (Command Button) from VibeUI

## 1. Install first — do not skip, do not recreate
Install command is unavailable: the VibeUI registry URL is not configured.

Installs to: components/vibeui/button-008.tsx (the exact path follows this project's components.json aliases).
npm dependencies: none.
Registry dependencies: none.

Install it from the registry. Do not recreate it from the description,
do not substitute a similar component from another library, and do not
rewrite it to match the project's existing style.

## 2. What it is
A command button with a shortcut hint: real keycaps on the right that press down on hover. Self-contained — one file, no dependencies.

A light command button with a keyboard shortcut hint. On the right it carries real keycaps rather than a text tail: each is its own kbd with an inner ring and a bottom edge that gives it depth. On hover the keys press down — the edge disappears and they drop by a pixel. The label is set in the regular face, the keys in monospace.

## 3. How to use it
import { Button008 } from "@/components/vibeui/button-008"

<Button008 keys={["⌘", "K"]} onClick={openCommandMenu}>
  Quick search
</Button008>

Read the installed file for the full prop list.

## 4. Where to place it
This is a small inline component. Put it exactly where the user asked,
inside the existing markup. Do not create a new page, section or
wrapper for it. If a similar control already sits in that spot,
replace it instead of adding a second one.

Placement: ___
(The user fills this line in. If it is still blank, ask where to put it
instead of guessing.)

## 5. Keep exactly as installed
- the keys as separate kbd elements with a bottom edge — a flat text tail kills the idea of the component
- the press effect on hover: the edge disappears and the keys drop
- the monospace face on the keys against the proportional one on the label
- aria-hidden on the key group: it is a hint, not the button's content
- the light neutral palette — this button is built for a toolbar, not for a hero

## 6. You may change
- the label
- the key set through the keys prop
- the key glyph colour through the accent prop
- the onClick handler
- outer spacing through className

## 7. Rules
- The component only displays the shortcut. Binding the actual hotkey is your app's job — do not add a listener inside the component.
- Keep keys in step with the real shortcut and the user's platform, otherwise the hint lies.
- Do not lift the CSS variables into globals.css: the component has to stay a single file.

## 8. Verify
- it renders with no console errors;
- it looks like the preview on the VibeUI page you copied this from;
- if it does not, you changed something listed in section 5 — put it back.

For developers

The install command is unavailable: the environment variableREGISTRY_BASE_URL

Компонент самодостаточен: один файл, без зависимостей, собственная палитра в локальных переменных --vibeui-button-008-*. Клавиши задаются массивом keys и рисуются тегом kbd; объём даётся нижней гранью через box-shadow. Сам обработчик горячей клавиши компонент не вешает — это задача приложения.

Component source

The same file your agent installs. Here in case you would rather copy it by hand.

import type { ComponentPropsWithoutRef, CSSProperties } from "react"

export type Button008Props = ComponentPropsWithoutRef<"button"> & {
  /** Клавиши подсказки. Каждая рисуется отдельной клавишей. */
  keys?: string[]
  accent?: string
}

// Идея компонента: кнопка сразу учит горячей клавише. Справа — настоящие
// клавиши с объёмом (нижняя грань и внутренняя подсветка), а не текстовый
// хвост. На наведении клавиши «нажимаются»: грань уходит, они опускаются.
const STYLES = `
:where([data-vibeui-block="button-008"]){
--vibeui-button-008-bg:oklch(0.98 0.002 265);
--vibeui-button-008-fg:oklch(0.3 0.014 265);
--vibeui-button-008-border:oklch(0.55 0.02 265 / 26%);
--vibeui-button-008-key-bg:oklch(1 0 0);
--vibeui-button-008-key-fg:oklch(0.45 0.015 265);
--vibeui-button-008-key-edge:oklch(0.55 0.02 265 / 34%);
--vibeui-button-008-ring:oklch(0.55 0.02 265 / 60%);
--vibeui-button-008-radius:0.625rem;
--vibeui-button-008-font:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
--vibeui-button-008-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
}
[data-vibeui-block="button-008"]{
appearance:none;cursor:pointer;
display:inline-flex;align-items:center;gap:0.75rem;
height:2.5rem;padding:0 0.5rem 0 0.875rem;
border:1px solid var(--vibeui-button-008-border);border-radius:var(--vibeui-button-008-radius);
font-family:var(--vibeui-button-008-font);font-size:0.875rem;font-weight:500;line-height:1;
background:var(--vibeui-button-008-bg);color:var(--vibeui-button-008-fg);
transition:border-color .18s ease,background-color .18s ease;
}
[data-vibeui-block="button-008"] [data-part="keys"]{display:inline-flex;align-items:center;gap:0.1875rem;flex:none}
[data-vibeui-block="button-008"] [data-part="key"]{
min-width:1.375rem;height:1.375rem;padding:0 0.3125rem;border-radius:0.3125rem;
display:inline-flex;align-items:center;justify-content:center;
font-family:var(--vibeui-button-008-mono);font-size:0.6875rem;line-height:1;
color:var(--vibeui-button-008-key-fg);background:var(--vibeui-button-008-key-bg);
box-shadow:0 1px 0 0 var(--vibeui-button-008-key-edge),inset 0 0 0 1px var(--vibeui-button-008-key-edge);
transform:translateY(-1px);
transition:transform .14s ease,box-shadow .14s ease;
}
[data-vibeui-block="button-008"]:hover:not(:disabled){border-color:color-mix(in oklab, var(--vibeui-button-008-fg) 40%, transparent)}
[data-vibeui-block="button-008"]:hover:not(:disabled) [data-part="key"]{transform:translateY(0);box-shadow:inset 0 0 0 1px var(--vibeui-button-008-key-edge)}
[data-vibeui-block="button-008"]:focus-visible{outline:2px solid var(--vibeui-button-008-ring);outline-offset:2px}
[data-vibeui-block="button-008"]:disabled{cursor:not-allowed;opacity:.55}
@media (prefers-reduced-motion:reduce){[data-vibeui-block="button-008"] *{transition:none!important}}
`

/**
 * Кнопка команды с подсказкой горячей клавиши на объёмных клавишах.
 * Один файл, ноль зависимостей, собственная палитра.
 */
export function Button008({
  keys = ["⌘", "K"],
  accent,
  type = "button",
  className,
  style,
  children = "Быстрый поиск",
  ...props
}: Button008Props) {
  const palette = {
    ...(accent ? { "--vibeui-button-008-key-fg": accent } : null),
    ...style,
  } as CSSProperties

  return (
    <>
      <style href="vibeui-button-008" precedence="medium">
        {STYLES}
      </style>
      <button
        {...props}
        type={type}
        data-vibeui-block="button-008"
        className={className}
        style={palette}
      >
        {children}
        <span data-part="keys" aria-hidden="true">
          {keys.map((key) => (
            <kbd data-part="key" key={key}>
              {key}
            </kbd>
          ))}
        </span>
      </button>
    </>
  )
}