# Mark (/docs/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.

```tsx
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 [#playground]

<story.Playground />

### Full prop browser [#full-prop-browser]

<story.WithControl />

## Independent background and color [#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.

<Preview align="block" code="&#x22;<Mark>default</Mark>\n<Mark background=\&#x22;green\&#x22;>background only</Mark>\n<Mark color=\&#x22;brand\&#x22;>color only</Mark>\n<Mark background=\&#x22;red\&#x22; color=\&#x22;brand\&#x22;>both, independently</Mark>&#x22;">
  <div className="flex flex-wrap items-center gap-3">
    <Mark>
      default
    </Mark>

    <Mark background="green">
      background only
    </Mark>

    <Mark color="brand">
      color only
    </Mark>

    <Mark background="red" color="brand">
      both, independently
    </Mark>
  </div>
</Preview>

## Colors [#colors]

Any palette color works for either prop.

<Preview align="block" code="`{COLORS.map((c) => <Mark key={c} background={c}>{c}</Mark>)}`">
  <div className="flex flex-wrap gap-2">
    {COLORS.map((c) => (
          <Mark key={c} background={c}>
            {c}
          </Mark>
        ))}
  </div>
</Preview>

## Nested inside Code [#nested-inside-code]

`Mark` is also attached to [`Code`](/docs/code) as `Code.Mark` — the same component, for convenient composition when marking a token inside a code snippet. See [Code's nesting example](/docs/code#nesting-a-mark).

## API [#api]

<TypeTable
  type="{
  color: {
    type: &#x22;'brand' | 'neutral' | 'red' | 'orange' | 'yellow' | 'green' | 'teal' | 'cyan' | 'blue' | 'purple' | 'pink' | (string & {})&#x22;,
    default: &#x22;'neutral'&#x22;,
    description: &#x22;Text color. Independent of background — never falls back to it.&#x22;,
  },
  background: {
    type: &#x22;'brand' | 'neutral' | 'red' | 'orange' | 'yellow' | 'green' | 'teal' | 'cyan' | 'blue' | 'purple' | 'pink' | (string & {})&#x22;,
    description: &#x22;Background/highlight tint. Defaults to \&#x22;yellow\&#x22; when unset. Independent of color — color alone with no background renders no highlight at all.&#x22;,
  },
}"
/>

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

## Accessibility [#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.