Search Results
A mail search pane with a token filled search bar, folder scope chips, ruled result rows highlighting the matched term, and a result count footer.
A mail search pane with a token filled search bar, folder scope chips, ruled result rows highlighting the matched term, and a result count footer.
Search blocks by description or jump to a page.
The source for every Application block is included with Basic and Pro. Pick a plan to copy the code.
Already purchased? Log in
Search Results is the active search pane for a mailbox, five hits for a from:priya roadmap query. The search bar shows the operator as a removable token chip beside the free text query. Folder scope chips (All mail, Inbox, Archive, Trash and Spam) each carry their own result count, and every ruled row highlights the matched term in both the subject and the snippet.
Results are one typed array where each row splits its subject and snippet into pre, match, and post, so the matched term renders inside a mark tag. A footer reports the result count, the search time, and which fields the query covered.
Reach for this block as the results surface behind your mailbox search box, wired to your query endpoint and current scope. The rows are static; feed it real hits and wire the scope chips to rerun the search against each folder.
A natural flow around it on an Application Pro page:
Before
After
One strong use is the mailbox search results surface. Other ranked result lists:
Tip: the match highlight uses bg-muted, not a bright yellow, so it stays legible in both light and dark themes.