Website
SearchPalette
Search results, actions and a detail view in one accessible modal.
Usage
When to reach for it
Pass already-filtered results; the package owns the combobox and focus behavior.
Ships from@misoto22/design/website
import { SearchPalette } from '@misoto22/design/website'Notes
Search, actions and an optional result detail inside one accessible modal.
Best practices
Do
- Supply localized labels, descriptive links and meaningful image alternatives.
Don’t
- Do not put service credentials, routing logic or backend models inside presentation components.
Examples
host filtered results
The host filters records and handles selection; the palette supplies modal focus and keyboard navigation. Close the palette to return focus to the button that opened it.
Nothing selected
Parts
Composed at the call site rather than configured through props, so a layout this component did not anticipate is still expressible.
SearchExcerpt
Render query highlights as text, never as consumer-supplied HTML.
| Prop | Type | Default | Description |
|---|---|---|---|
| segmentsrequired | ReadonlyArray<{ text: string; highlighted: boolean }> | — |