SearchButton

Specialized button component for triggering search functionality with keyboard shortcuts

Basic Search Button

Simple search button with default styling

Show Code

Search Button Variants

Different visual styles for search buttons

Show Code

Search Button Shapes

Different shapes and sizes

Show Code

Search with Keyboard Hint

Search button with keyboard shortcut hint

Show Code

Search with Tooltip

Search button with tooltip help

Show Code

Usage Notes

  • Includes Search icon from Lucide by default
  • onClick handler is required - this is always an interactive component
  • Use showKeyboardHint to display keyboard shortcuts like ⌘K
  • Keyboard hint is hidden on mobile for better UX
  • Tooltip provides additional context on hover
  • Ghost variant is default to blend with navigation bars
  • Circle shape works well for icon-only buttons