SearchCommand

SearchCommand is the trigger pattern for global command/search surfaces. It looks like a search field but acts as a <button> and opens a CommandMenu on click. Pair with the ⌘K shortcut.

#Default usage

<SearchCommand />

#Import

import { SearchCommand } from "@froggdesign/enter-ui-react";

#Behavior ownership

SearchCommand is a button, not a search engine or command dialog. The shortcut text is a visual hint only: wire onClick, the keyboard listener, dialog state, and search results in your application. Remove the shortcut hint if the shortcut is not implemented. Defaults use a 14px regular label and a semibold monospace shortcut. Provide an accessible name when the visible label is hidden.

#Accessibility

SearchCommand is a real <button>, so it integrates with focus order, keyboard, and screen readers. The shortcut shows up as Kbd for sighted users; bind the keyboard handler at the route level to actually open the command palette.

#API

• placeholder: text shown inside the trigger (also default aria-label).
• shortcut: keyboard hint rendered as a Kbd. Pass empty string to hide.
• hint: optional muted text rendered before the shortcut.

#Styling

Every exported component accepts className. EnterUI styles use .eui-* classes and --eui-* variables mapped from FroggDesign theme tokens.