Mark

Mark renders an inline <mark> — a highlighter for a word or phrase in ordinary prose. background and color are fully independent: background only ever tints the highlight, color only ever tints the text — neither leaks into the other. Neither set — the default — reads as a plain yellow highlighter with neutral text.

import { Mark } from '@42-central/ui-react/mark';

<Mark>highlighted</Mark>
<Mark background="green">added</Mark>
<Mark color="brand">important</Mark>
<Mark background="red" color="brand">renamed</Mark>

Playground

<f>
  highlighted
</f>

Full prop browser

Independent background and color

Unlike most colored components in the kit (where one color prop drives both fill and text together), Mark exposes two separate props with no cross-talk: background alone tints the highlight, with neutral gray text, not text matching the highlight; color alone (no background) renders as tinted text with no highlight at all; both together are fully independent.

<Mark>default</Mark>
<Mark background="green">background only</Mark>
<Mark color="brand">color only</Mark>
<Mark background="red" color="brand">both, independently</Mark>

Colors

Any palette color works for either prop.

{COLORS.map((c) => <Mark key={c} background={c}>{c}</Mark>)}

Nested inside Code

Mark is also attached to Code as Code.Mark — the same component, for convenient composition when marking a token inside a code snippet. See Code's nesting example.

API

All other props are forwarded to the underlying <mark>.

Accessibility

Mark renders a semantic <mark> element — the right markup for "this text is relevant/highlighted in the current context." It carries no interactive behavior; screen readers announce it as highlighted content.

Changelog