Skip to content
KansoMakado design system 1.1
makado.app

Public pages

SearchDialog

Search everything from anywhere: projects, brands, products, contacts, contracts, invoices and the pages and settings themselves.

Preview

Live, in this page’s themeOpen on its own

Props

PropTypeDescription
openRequiredboolean
onCloseRequired() => void
queryRequiredstring
onQueryChangeRequired(query: string) => void
groupsRequiredSearchGroup[]
onSelectRequired(item: SearchResult) => voidCalled with the chosen result; go to its href here.
placeholderstring
emptyTextstringDefault: "Nothing matches that. Try fewer words."
labelstring
loadingbooleanWhile what's searched is still loading: says so instead of "Nothing matches".
classNamestring

Guidelines

Search everything from anywhere: projects, brands, products, contacts, contracts, invoices and the pages and settings themselves. One field on top, the results grouped below.

Provide: open, onClose, query, onQueryChange, groups (each with a label and items), and onSelect (go to the item's href). Optional placeholder, emptyText and label.

  • Open it with Command K (Control K on Windows) from any page, and from a Search button in the toolbar (and the top bar on phones). Say the shortcut in the button's tooltip.
  • Arrow keys move through every result across the groups; Enter opens the active one; Escape or a click outside closes it and puts focus back where it was.
  • Keep groups in a fixed order and short (about five each), most relevant first. A result's detail is a short line: the brand, the stage, a date.
  • Before anything is typed, show where people go most (the pages). When nothing matches, say so plainly: "Nothing matches that. Try fewer words."
  • It's part of the navigation layer, so it's glass over a scrim; on phones it fills the screen. The active result uses the one selected style.
  • The number of results is announced as you type.
  • Pass loading until what's searched has loaded, so it says "Loading your workspace" instead of a false "Nothing matches".
  • On phones the close control is Cancel in words, a full size tap target; on desktop it's the esc hint. Home and End jump to the first and last result.