Mark

Status

Stable

Added

Components 1.2.024 Nov 2025

Docs updated

19 Oct 2026

Highlighted text using the HTML mark element with intent variants.

Import

import { Mark } from '@oztix/roadie-components'

Examples

Default

The default intent is info.

<p>
  The Mark component is used to <Mark>highlight text</Mark> within content.
</p>

Intents

<p>
  This is <Mark intent='neutral'>neutral</Mark> highlighted text.
</p>
<p>
  This is <Mark intent='neutral-inverted'>neutral-inverted</Mark> highlighted text.
</p>

As heading

Use render to draw Mark as a heading element. Padding automatically increases to suit display text.

<div className='grid gap-4 text-center'>
  <Mark render={<h2 />} intent='accent' className='text-display-ui-3'>
    Great events need great partners
  </Mark>
  <Mark render={<h3 />} intent='neutral' className='text-display-ui-5'>
    Not just great ticketing software

With headings

Mark and Highlight can both be used inline within headings.

<div className='grid gap-2 text-center'>
  <h1 className='text-display-ui-3 text-strong'>
    Great events need great <Mark intent='accent'>partners</Mark>
  </h1>
  <h2 className='text-display-ui-5 text-subtle'>
    <Highlight text='Not just great ticketing software. Why?' query='great' intent='warning' />

API reference

Mark

asElementType Deprecated: Deprecated: Use `render` instead. `as` will be removed in v3.0.0.
renderRoadieRenderProp: Escape hatch — swap the underlying element with full control over the rendered shape (e.g. `render={<h2 />}` to highlight a heading).
classNamestring
intent"neutral" | "neutral-inverted" | "brand" | "brand-secondary" | "brand-blue" | "brand-orange" | "brand-purple" | "accent" | "danger" | "success" | "warning" | "info" | null

Highlighted text using the HTML mark element with intent variants.

Import

import { Mark } from '@oztix/roadie-components'

Examples

Default

The default intent is info.

<p>
  The Mark component is used to <Mark>highlight text</Mark> within content.
</p>

Intents

<p>
  This is <Mark intent='neutral'>neutral</Mark> highlighted text.
</p>
<p>
  This is <Mark intent='neutral-inverted'>neutral-inverted</Mark> highlighted text.
</p>

As heading

Use render to draw Mark as a heading element. Padding automatically increases to suit display text.

<div className='grid gap-4 text-center'>
  <Mark render={<h2 />} intent='accent' className='text-display-ui-3'>
    Great events need great partners
  </Mark>
  <Mark render={<h3 />} intent='neutral' className='text-display-ui-5'>
    Not just great ticketing software

With headings

Mark and Highlight can both be used inline within headings.

<div className='grid gap-2 text-center'>
  <h1 className='text-display-ui-3 text-strong'>
    Great events need great <Mark intent='accent'>partners</Mark>
  </h1>
  <h2 className='text-display-ui-5 text-subtle'>
    <Highlight text='Not just great ticketing software. Why?' query='great' intent='warning' />

API reference

Mark

asElementType Deprecated: Deprecated: Use `render` instead. `as` will be removed in v3.0.0.
renderRoadieRenderProp: Escape hatch — swap the underlying element with full control over the rendered shape (e.g. `render={<h2 />}` to highlight a heading).
classNamestring
intent"neutral" | "neutral-inverted" | "brand" | "brand-secondary" | "brand-blue" | "brand-orange" | "brand-purple" | "accent" | "danger" | "success" | "warning" | "info" | null