# Mark

Status: stable. Added in Components 1.2.0.

Highlighted text using the HTML mark element with intent variants.

## Import

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

## Examples

### Default

The default intent is `info`.

```tsx

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

### Intents

```tsx
<p>
  This is <Mark intent='neutral'>neutral</Mark> highlighted text.
</p>
<p>
  This is <Mark intent='neutral-inverted'>neutral-inverted</Mark> highlighted text.
</p>
<p>
  This is <Mark intent='accent'>accent</Mark> highlighted text.
</p>
<p>
  This is <Mark intent='brand'>brand</Mark> highlighted text.
</p>
<p>
  This is <Mark intent='brand-secondary'>brand-secondary</Mark> highlighted text.
</p>
<p>
  This is <Mark intent='info'>info</Mark> highlighted text.
</p>
<p>
  This is <Mark intent='success'>success</Mark> highlighted text.
</p>
<p>
  This is <Mark intent='warning'>warning</Mark> highlighted text.
</p>
<p>
  This is <Mark intent='danger'>danger</Mark> highlighted text.
</p>
```

### As heading

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

```tsx

<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
  </Mark>
  <Mark render={<h3 />} intent='brand-secondary' className='text-display-ui-5'>
    Built for the live events industry
  </Mark>
</div>
```

### With headings

Mark and [Highlight](https://ticketsolutionsptyltd.github.io/roadie/components/highlight.md) can both be used inline within headings.

```tsx

<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' />
  </h2>
</div>
```

## API reference

### Mark

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

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

Docs updated 19 Oct 2026.