Highlight
Marks the part of a text that matched a search, by query or by the positions of a fuzzy match.
- Highlight
PreviewLink to the section Preview
Live in all three themes. Everything here is interactive.
Light theme, Highlight
Café opening hours and the CAFE menusrc/search/GlobalSearch.tsxA very long result title that wraps onto a second line on a narrow screen and still marks the word screen
Dark theme, Highlight
Café opening hours and the CAFE menusrc/search/GlobalSearch.tsxA very long result title that wraps onto a second line on a narrow screen and still marks the word screen
High contrast theme, Highlight
Café opening hours and the CAFE menusrc/search/GlobalSearch.tsxA very long result title that wraps onto a second line on a narrow screen and still marks the word screen
UsageLink to the section Usage
import { Highlight } from '@skribly/ui/search'<Highlight text={title} query={query} />
<Highlight text={path} positions={match.positions} />Every label is a prop, so the app passes its own words in its own language. See no built-in text.
AccessibilityLink to the section Accessibility
- Matches are mark elements with a heavier weight and an underline, so they never rely on colour, and both stay under forced colours.
- Accents and case are ignored, so "cafe" marks "Café".
This demo runs through axe in all three themes on every test run. See what the tests check.