Mark

Mark is the inline highlight analogue of HTML <mark>. It paints a subtle warning-toned background behind the text — handy for search-term matches and token highlighting. It inherits all Text props, so tone, weight, and variant compose normally on top of the highlight.

Import

import { Mark } from '@mindees/ui';

Usage

<Text>
  Results for <Mark>layout intelligence</Mark> across the docs.
</Text>

Props

Prop	Type	Default	Description
tone	TextTone	—	Color role applied to the marked text.
weight	FontWeightToken	—	Font weight of the marked run.
children	React.ReactNode	—	The highlighted text.

Inherits all TextProps.

Accessibility

Mark renders a Text element, so it carries standard text semantics and respects font scaling. The highlight is purely visual — screen readers read the marked text the same as surrounding text, so do not rely on color alone to convey meaning.