Components/Data Display/SearchResult

SearchResult

Data Display

Single result row used inside SearchBox result lists.

Renders a single search result with optional leading slot (logo/icon), tag chips, date, and source URL. The highlight prop wraps matching substrings in <mark>. density switches between comfortable and compact padding.

Usage

import { SearchResult } from "nosible-ux"

export default function Example() {
  return (
    <SearchResult
      title="Apple Q3 2025 Earnings Beat Expectations"
      snippet="Apple reported EPS of $1.45, beating the $1.38 consensus estimate by 5.1%."
      source="SEC EDGAR"
      date={new Date("2025-07-28")}
      tags={["earnings", "AAPL"]}
      highlight="earnings"
    />
  )
}

Examples

With leading slot and link

NVDA Supply Chain Risk Signal

Multiple sources confirm component shortages affecting Q4 2025 delivery timelines.

Nosible Signal Engine · 2025-07-30supply-chainNVDArisk

Compact density

Fed signals rate hold through Q1 2026

FOMC minutes indicate no rate changes expected in the near term.

Federal Reservemacrorates

Accessibility

Card is keyboard-navigable (Enter/Space opens URL). Leading and trailing slots do not inherit the card click. highlight wrapping uses <mark> which is announced by screen readers.

Props

Name	Type	Default	Description
`date`	`string \| Date \| undefined`	—	Publication date (ISO string or Date object). Displayed as YYYY-MM-DD.
`density`	`"comfortable" \| "compact" \| null \| undefined`	—
`highlight`	`string \| undefined`	—	Term to highlight in title and snippet. Case-insensitive.
`leading`	`ReactNode`	—	Optional leading slot — typically a favicon, icon, or thumbnail (40×40).
`snippet`	`string`	—	Body snippet shown beneath the title. Highlighted when `highlight` is set.
`source`	`string \| undefined`	—	Publisher / data-source label shown in the metadata row.
`tags`	`string[] \| undefined`	—	Array of tag strings rendered as Neo Green mono labels.
`title`	`string`	—	Primary heading text. Supports keyword highlighting when `highlight` is set.
`trailing`	`ReactNode`	—	Optional trailing slot — action button or chevron. Clicks are isolated from card click.
`url`	`string \| undefined`	—	Source URL opened in a new tab on click or Enter/Space keypress.

← All Components Getting Started →