Highlight Text
betaA marker stroke, thick underline or strike drawn on behind words as they scroll into view, when hovered or focused, or at once.
- Effects & motion
- 1 file
- 1 npm package
- Accessibility notes
Loading the example…
pnpm dlx @dowel-ui/cli add highlight-textnpm packages installed: class-variance-authority.
import { HighlightText } from "@/components/ui/highlight-text";Default
Lines
<HighlightText>
| Prop | Type | Default |
|---|---|---|
asThe element to render. Default "span". | HighlightTextElement | "span" |
colorHighlight colour: a token or any CSS colour. Default: a warm marker, or the primary colour for lines. | string | — |
delayWait before drawing, in milliseconds. Default 0. | number | 0 |
durationLength of the draw, in milliseconds. Default 700. | number | 700 |
triggerWhen to draw: on scrolling into view, while hovered or focused, or at once. Default "view". | "view" | "hover" | "always" | "view" |
variant | "marker" | "underline" | "strike" | "marker" |
Plus every attribute of <span> except color.
The text is never touched; the highlight is a background, so the words read, wrap and copy as written. The hover trigger also draws for keyboard focus, on the element or inside it. Under reduced motion the highlight appears at once instead of drawing. It is visual emphasis only: render it as <mark> or <strong> with `as` when the emphasis matters to the meaning, so assistive technology conveys it too. Keep marker colours light enough that the text over them still meets contrast.
8/8
checks passed
- Tested — passes
- axe assertion — passes
- Keyboard tested — does not apply
- Storybook examples — passes
- Accessibility documented — passes
- Semantic tokens only — passes
- Motion from tokens — passes
- className merged — passes
- Visible focus — does not apply
- No fixed widths — passes