The way into a command palette
A button dressed as a search field, with a prompt and the shortcut’s keycaps, because typing happens in the palette itself. It sits on the row-control height, so it lines up with the buttons and pickers beside it. It is the entry point in this site’s header.
Default
The host sets its width; the keycaps sit at the far end. It is live: it opens this site’s palette.
Sizes and the icon form
Two sizes on the row-control scale. With iconOnly it folds to a circle the row height across, for a row with no room for the field; the prompt stays its accessible name and its tooltip.
Pairing with the palette
The trigger only opens: its onClick sets CommandPalette’s open state, and the palette owns the shortcut. The label and the shortcut are props, so the prompt can say what a product’s palette does, and aria-keyshortcuts follows the keys drawn: the default ⌘ K also announces Ctrl+K, which the palette answers to too, and off a Mac a host draws Ctrl K instead.
// From the npm package
import { CommandPaletteTrigger } from 'rift-ds/components/CommandPaletteTrigger/CommandPaletteTrigger';
// Or as source you own, via the shadcn CLI
npx shadcn@latest add https://rift-ds.com/r/command-palette-trigger.json