Search Trigger

A header button drawn as a compact field that opens search or a command palette, with its shortcut shown as a keycap.

Installation

npx shadcn@latest add https://ui.mattdowney.com/r/search-trigger.json

Usage

import { SearchTrigger } from "@/components/ui/search-trigger"

Examples

Default

Opens your search on click; the shortcut is only shown, so listen for the same keys yourself.

Wider, with its own label

Children replace the label. Give it a width and the keycap stays at the end.

API Reference

Prop	Type	Default	Description
shortcut	React.ReactNode	-	The keys that open the same search, shown in a `Kbd`: `"⌘K"`. Hidden on touch screens. Shown only; the keyboard listener is yours.
children	React.ReactNode	"Search..."	The label.
...props	React.ComponentProps<"button">	-	Every button prop, including `onClick`.

shortcutReact.ReactNodeThe keys that open the same search, shown in a `Kbd`: `"⌘K"`. Hidden on touch screens. Shown only; the keyboard listener is yours.
childrenReact.ReactNode = "Search..."The label.
...propsReact.ComponentProps<"button">Every button prop, including `onClick`.

import * as React from "react"

import { Kbd } from "@/registry/ui/kbd"
import { cn } from "@/registry/lib/utils"

// @use-when a header button that opens search or a command palette, drawn as a
// compact field with its shortcut beside the label (Search ⌘K). Not a real
// search field: when typing happens in place, use `Input`.
function SearchTrigger({
  shortcut,
  className,
  children = "Search...",
  ...props
}: React.ComponentProps<"button"> & {
  /** The keys that open the same search, shown as a keycap: `"⌘K"`. */
  shortcut?: React.ReactNode
}) {
  return (
    <button
      type="button"
      data-slot="search-trigger"
      className={cn(
        // Input's `default` box (h-8 / px-3 / `rounded-action`, a real border,
        // its 1px accent focus ring), filled `bg-muted` so it reads as a
        // button that opens something rather than a field that takes text.
        "tap-target inline-flex h-8 items-center gap-2 rounded-action border border-border bg-muted px-3 text-xs text-muted-foreground outline-none transition-[color,box-shadow,border-color] duration-small ease-small hover:text-foreground focus-visible:border-accent focus-visible:ring-1 focus-visible:ring-ring-accent",
        // With a keycap, the end padding matches the cap's inset from the top
        // and bottom edge (32px box, 1px border, 20px cap: 5px each way), so
        // the cap sits in the corner as evenly as a button's icon does. Its
        // 6px corner is then concentric with the box's 12px.
        shortcut ? "pr-1.25" : null,
        className
      )}
      {...props}
    >
      {children}
      {/* Hidden on a touch screen, which has no keys to press. */}
      {shortcut ? <Kbd className="ml-auto pointer-coarse:hidden">{shortcut}</Kbd> : null}
    </button>
  )
}

export { SearchTrigger }

Scroll Fade Section