Markcomponent

Highlighted text — renders a <mark> element to call attention to a run of text.

Highlighted text — renders a <mark> element to call attention to a run of text, such as a matched search term. Painted as a small inline pill with a yellow background by default.

Things to know:

• Use it for relevance highlighting (search hits, the current match), not for general emphasis — reach for <Strong> or <Emphasis> for that.
• It is a self-contained inline pill: it adds its own inline padding and rounded corners.
• Inside <Prose> a raw <mark> picks up the same styling, so Markdown-rendered highlights match component ones.

Usage

Highlighted search term

import { Mark } from "shelving/ui";

<p>Files are stored in <Mark>UTF-8</Mark> encoding.</p>

Styling

Mark is a fixed-palette highlight: it paints from dedicated colour hooks rather than the tint ladder.

Global tokens it reads: --light-yellow, --dark-yellow, --radius-xxsmall, and --weight-strong.