Search

Business-agnostic search shell and result parts for composing entity, message, and thread search experiences.

GitHub

Preview#

Entity items
Message item
Thread item
Thread#proj-uiux3 hits73 days ago
Search source-parity review

Anatomy#

<>
  <SearchEntityResult>
    <SearchEntityResultLeading>
      {/* caller-owned identity */}
      <SearchEntityResultActivity role="img" aria-label="Active" />
    </SearchEntityResultLeading>
    <SearchEntityResultContent>
      <SearchEntityResultHeader>
        <SearchEntityResultTitle>Project Orbit</SearchEntityResultTitle>
        <Badge appearance="solid" variant="default" uppercase>
          Channel
        </Badge>
      </SearchEntityResultHeader>
      <SearchEntityResultDescription>Shared project channel</SearchEntityResultDescription>
    </SearchEntityResultContent>
  </SearchEntityResult>

  <SearchMessageResult>
    <SearchMessageResultHeader>
      <SearchMessageResultMeta>#design</SearchMessageResultMeta>
      <SearchMessageResultThreadMeta>thread</SearchMessageResultThreadMeta>
      <SearchMessageResultSender>Ari</SearchMessageResultSender>
      <SearchMessageResultTimestamp>yesterday</SearchMessageResultTimestamp>
    </SearchMessageResultHeader>
    <SearchMessageResultBody>
      Matched <SearchMessageResultMatch>message</SearchMessageResultMatch>
    </SearchMessageResultBody>
  </SearchMessageResult>

  <SearchThreadResult>
    <SearchThreadResultHeader>
      <SearchThreadResultMeta>
        <Badge appearance="solid" variant="default">Thread</Badge>
        <SearchThreadResultTimestamp>yesterday</SearchThreadResultTimestamp>
      </SearchThreadResultMeta>
      <SearchThreadResultTitle>Planning discussion</SearchThreadResultTitle>
    </SearchThreadResultHeader>
    <SearchThreadResultMessages>
      <SearchThreadMessageResult />
    </SearchThreadResultMessages>
  </SearchThreadResult>
</>

Usage#

Muted entity#

Loading#

Searching for “design system”…
Messages

No results#

No results for “design system”
Try another query or remove one of the active filters.

Request error#

Search failed
Check your connection, then try again.

API#WIP

Shell#

SearchShellRoot · SearchShellRootProps#

PropTypeDefaultDescription
...propsSearchShellRootProps—Panel props for the outer search frame.

SearchShellFilters · SearchShellFiltersProps#

PropTypeDefaultDescription
...propsSearchShellFiltersProps—Caller-owned content and native props.

SearchShellViewport · SearchShellViewportProps#

PropTypeDefaultDescription
...propsSearchShellViewportProps—Caller-owned content and native props.

Result#

SearchResultsSummary#

PropTypeDefaultDescription
...propsspan props—Compact summary line for the result count or current search progress.

SearchResultsSection#

PropTypeDefaultDescription
...propsdiv props—Groups one result family, such as server entities or message results.

SearchResultsSectionHeading#

PropTypeDefaultDescription
...propsdiv props—Visual heading for a result section; the consumer supplies its label.

SearchResultsList#

PropTypeDefaultDescription
...propsdiv props—Vertical list layout shared by entity, message, and thread result rows.

SearchEntityResult#

PropTypeDefaultDescription
selectedbooleanfalseApplies the selected border and shadow treatment via data-selected.
...propsbutton props—Interactive entity result row; the consumer composes identity and metadata.

SearchEntityResultLeading#

PropTypeDefaultDescription
...propsnative element props—Caller-owned content and native props.

SearchEntityResultIcon#

PropTypeDefaultDescription
...propsnative element props—Caller-owned content and native props.

SearchEntityResultContent#

PropTypeDefaultDescription
...propsnative element props—Caller-owned content and native props.

SearchEntityResultHeader#

PropTypeDefaultDescription
...propsnative element props—Caller-owned content and native props.

SearchEntityResultActivity#

PropTypeDefaultDescription
...propsnative element props—Caller-owned content and native props.

SearchEntityResultTitle#

PropTypeDefaultDescription
mutedbooleanfalseUses the muted visual treatment while the caller keeps the text and state choice.
...propsspan props—Caller-owned entity text content.

SearchEntityResultDescription#

PropTypeDefaultDescription
mutedbooleanfalseUses the muted visual treatment while the caller keeps the text and state choice.
...propsspan props—Caller-owned entity text content.

SearchMessageResult#

PropTypeDefaultDescription
selectedbooleanfalseApplies the selected border and shadow treatment via data-selected.
...propsbutton props—Standalone interactive message result row.

SearchMessageResultHeader#

PropTypeDefaultDescription
...propsdiv props—Meta row for caller-owned channel, sender, and timestamp content.

SearchMessageResultMeta#

PropTypeDefaultDescription
...propsnative element props—Caller-owned content and native props.

SearchMessageResultThreadMeta#

PropTypeDefaultDescription
...propsnative element props—Caller-owned content and native props.

SearchMessageResultSender#

PropTypeDefaultDescription
...propsnative element props—Caller-owned content and native props.

SearchMessageResultTimestamp#

PropTypeDefaultDescription
...propsnative element props—Caller-owned content and native props.

SearchMessageResultMatch#

PropTypeDefaultDescription
...propsnative element props—Caller-owned content and native props.

SearchMessageResultBody#

PropTypeDefaultDescription
...propsdiv props—Content region holding the matched message text.

SearchThreadResultMeta#

PropTypeDefaultDescription
...propsnative element props—Caller-owned content and native props.

SearchThreadResultTimestamp#

PropTypeDefaultDescription
...propsnative element props—Caller-owned content and native props.

SearchThreadResultTitle#

PropTypeDefaultDescription
...propsnative element props—Caller-owned content and native props.

SearchThreadMessageResult#

PropTypeDefaultDescription
selectedbooleanfalseApplies the nested selected treatment via data-selected.
...propsbutton props—Nested interactive message row with the spacing and borders used inside a thread result.

SearchThreadResult#

PropTypeDefaultDescription
selectedbooleanfalseApplies the selected border and shadow treatment via data-selected.
...propsdiv props—Thread result frame around the header and nested message rows.

SearchThreadResultHeader#

PropTypeDefaultDescription
...propsdiv props—Header region for caller-owned thread title and message-count content.

SearchThreadResultMessages#

PropTypeDefaultDescription
...propsdiv props—Stacking region for nested SearchThreadMessageResult rows.