Usage
Collapsed Mode
With Search Modal
Props
When true, displays only the search icon without text or shortcut indicator. Useful for collapsed sidebars or mobile views
Callback function triggered when the search button is clicked or the keyboard shortcut is pressed
Keyboard Shortcut
The component automatically registers a keyboard listener for the / (slash) key to trigger the search:- Pressing / anywhere in the application calls the
onOpencallback - The shortcut is disabled when focus is inside input fields to allow typing the slash character
- The shortcut indicator is displayed in the expanded view
Behavior
Expanded Mode (default)
- Shows search icon, “Search” text, and keyboard shortcut indicator (/)
- Full width button with hover effects
- Height: 32px (h-8)
- Shortcut displayed in a styled wrapper
Collapsed Mode
- Shows only the search icon
- Square button (32x32px)
- No text or shortcut indicator
Keyboard Handling
- The component listens for the / key globally
- Respects input focus - doesn’t trigger when typing in text fields
- Automatically registers and cleans up keyboard listener on mount/unmount
Styling
- Uses inverse theme colors for dark backgrounds (typically in sidebars)
- Border:
border-border-inverse-default - Text:
text-foreground-inverse(icon),text-foreground-inverse-secondary(label) - Hover:
hover:bg-background-selected-inverse - Rounded corners:
rounded-lg
Implementation Details
The component:- Uses the
GLOBAL_SEARCH_KEYconstant (set to ’/’) for the keyboard shortcut - Imports
isInputFocused()helper to check if an input is currently focused - Registers global keydown listener on mount
- Cleans up listener on component destroy
- Uses @invopop/ui-icons for Search and Slash icons
- Includes ShortcutWrapper component for keyboard shortcut display