Mark
Renders a styled <mark> element for inline text highlighting. The default background is the theme's yellow light color. Pass a named theme color or any CSS color to customize it.
Default
Use Mark to highlight important text inline.
<Text>
Use <Mark>Mark</Mark> to highlight important text inline.
</Text>Theme colors
blue — a named theme color highlight.
violet — a named theme color highlight.
green — a named theme color highlight.
red — a named theme color highlight.
orange — a named theme color highlight.
yellow — a named theme color highlight.
teal — a named theme color highlight.
<Mark color="blue">blue</Mark>
<Mark color="violet">violet</Mark>
<Mark color="green">green</Mark>
<Mark color="red">red</Mark>Custom CSS color
This text has a custom yellow highlight and a custom green highlight.
<Mark color="#ffe066">custom yellow</Mark>
<Mark color="rgba(0,200,150,0.25)">custom green</Mark>Props
| Prop | Type | Default | Description |
|---|---|---|---|
color | string | — | Highlight background color — theme key or CSS color |
class | string | — | Additional CSS class names |
style | object | — | Inline styles |
children | ReactNode | — | Content to render inside the highlighted mark |