Skip to content
Cynosure Cynosure

Mark

A thin inline-flow primitive — reach for it instead of Badge/Code when you need to highlight a substring inside flowing text without breaking baseline alignment or vertical rhythm.

  • stable
  • since v0.1.0
  • 4.28 kB
  • typography
  • mark
  • highlight

Renders the native <mark> element so assistive tech announces the content as highlighted. Falls back to system Mark/MarkText colours under forced-colors.

Preview
Open
tsx

Variants

Section titled “Variants”

Four visual treatments. marker (default) paints a soft highlighter-pen background; underline lays a thick rule under the text; chip flows a pill inline; bold colours and bolds the text with no decoration.

Preview
Open
tsx

Color schemes

Section titled “Color schemes”

Six token palettes: accent, success, warning (default), danger, info, neutral. All track light/dark themes automatically — no hand-rolled CSS variables required.

Preview
Open
tsx

Intensities

Section titled “Intensities”

subtle (default) uses the soft surface token; solid switches to the saturated solid + on-solid pair for stronger emphasis.

Preview
Open
tsx

Wraps across lines

Section titled “Wraps across lines”

Mark sets box-decoration-break: clone so the background, padding, and corner radius repaint on each wrapped line. No bookkeeping required.

Preview
Open
tsx

HighlightedText

Section titled “HighlightedText”

For the common “highlight these ranges inside this string” case, HighlightedText takes a text plus an array of { start, length } (or { start, end }) ranges and renders them as Mark spans interleaved with the surrounding text. Overlapping ranges are merged; out-of-range indices are clamped; empty ranges are dropped.

Preview
Open
tsx 
import { HighlightedText } from '@arshad-shah/cynosure-react';


<HighlightedText
  text={input}
  ranges={matches.map((m) => ({ start: m.index, length: m[0].length }))}
  variant="marker"
  colorScheme="warning"
/>

API

Section titled “API”

Mark

Section titled “Mark”
PropTypeDefaultDescription
variant
"marker"|"underline"|"chip"|"bold"
"marker"
Visual treatment for the highlight.
colorScheme
"accent"|"success"|"warning"|"danger"|"info"|"neutral"
"warning"
Token palette. Defaults to `warning` for the highlighter-pen feel.
intensity
"subtle"|"solid"
"subtle"
`subtle` uses the soft surface token; `solid` uses the saturated token.
as
"mark"|"span"
"mark"
Semantic element. `mark` (default) carries the native highlight role; use `span` when the surrounding context already conveys meaning and the highlight is purely decorative.
className
string
—
Additional class names appended after Cynosure's base classes.
style
CSSProperties
—
Inline style overrides merged last.
children
ReactNode
—
Highlighted text content.
padding
—
Padding on all four sides. Token from the spacing scale.
paddingX
—
Horizontal padding (left + right). Overrides `padding` on the X axis.
paddingY
—
Vertical padding (top + bottom). Overrides `padding` on the Y axis.
paddingTop
—
Padding on the top edge. Beats `padding` / `paddingY`.
paddingRight
—
Padding on the right (inline-end in RTL) edge.
paddingBottom
—
Padding on the bottom edge.
paddingLeft
—
Padding on the left (inline-start in RTL) edge.
margin
—
Margin on all four sides. Accepts the spacing scale or `"auto"`.
marginX
—
Horizontal margin (left + right). Use `"auto"` to centre.
marginY
—
Vertical margin (top + bottom).
marginTop
—
Margin on the top edge.
marginRight
—
Margin on the right edge.
marginBottom
—
Margin on the bottom edge.
marginLeft
—
Margin on the left edge.
width
—
Element width. Accepts a `SpaceToken`, `LengthValue`, or named alias.
height
—
Element height. Accepts a `SpaceToken`, `LengthValue`, or named alias.
minWidth
—
Minimum width — useful for preventing flex children from collapsing.
maxWidth
—
Maximum width — `"prose"` caps to a comfortable reading measure.
minHeight
—
Minimum height.
maxHeight
—
Maximum height.
background
—
Background colour. Use a `ColorToken` like `"bg.surface"` for theme awareness.
color
—
Text colour. Inherits unless set.
borderColor
—
Border colour. Pair with `borderWidth` to make the border visible.
borderWidth
—
Border thickness in scale steps.
borderStyle
—
Border line style.
borderRadius
—
Corner rounding token.
boxShadow
—
Drop-shadow token from the elevation scale.
opacity
Responsive<number | `${number}`>
—
Opacity 0–1. Use sparingly — prefer surface tokens over translucency.
overflow
—
How content that exceeds the box is handled.
overflowX
—
Horizontal-axis overflow control. Overrides `overflow` for the X axis.
overflowY
—
Vertical-axis overflow control.
display
—
CSS `display` value. `"contents"` removes the element's box from layout.
position
—
CSS `position`. Pair with `top`/`right`/`bottom`/`left` for placement.
top
—
Top inset (when positioned). Accepts a `SpaceToken`, `"auto"`, `"0"`, or `LengthValue`.
right
—
Right inset (when positioned).
bottom
—
Bottom inset (when positioned).
left
—
Left inset (when positioned).
zIndex
—
Stacking-context layer token (`"modal"`, `"tooltip"`, …).
gridColumn
Responsive<string>
—
Grid-column shorthand (e.g. `"1 / 3"`, `"span 2"`).
gridRow
Responsive<string>
—
Grid-row shorthand.
gridArea
Responsive<string>
—
Named grid area.
flex
Responsive<"1" | "none" | "auto" | "initial" | (string & {})>
—
Shorthand: `1 | auto | none | initial | <css>`. Resolves to `flex` on the child.
flexGrow
Responsive<number | `${number}`>
—
Grow factor inside a flex container.
flexShrink
Responsive<number | `${number}`>
—
Shrink factor inside a flex container.
flexBasis
Responsive<"content" | SizeValue>
—
Initial main-axis size before grow/shrink.
alignSelf
—
Override `align-items` for a single child.
justifySelf
—
Override `justify-items` for a single child (grid).
order
Responsive<number | `${number}`>
—
Flex/grid child reorder index.
asChild
boolean
—
When `true`, renders the primitive's single React child via `Slot`, forwarding className/style/ref/event handlers onto it.

HighlightedText

Section titled “HighlightedText”
PropTypeDefaultDescription
text*
string
—
Source string.
ranges*
readonly HighlightRange[]
—
Ranges to wrap in a `Mark`. Order and overlap are normalised.
wrapper
ElementType|null
null
Tag rendered around the whole string. Default is a fragment.
variant
"marker"|"underline"|"chip"|"bold"
"marker"
Visual treatment for the highlight.
colorScheme
"accent"|"success"|"warning"|"danger"|"info"|"neutral"
"warning"
Token palette. Defaults to `warning` for the highlighter-pen feel.
intensity
"subtle"|"solid"
"subtle"
`subtle` uses the soft surface token; `solid` uses the saturated token.
as
"mark"|"span"
"mark"
Semantic element. `mark` (default) carries the native highlight role; use `span` when the surrounding context already conveys meaning and the highlight is purely decorative.
className
string
—
Additional class names appended after Cynosure's base classes.
style
CSSProperties
—
Inline style overrides merged last.
padding
—
Padding on all four sides. Token from the spacing scale.
paddingX
—
Horizontal padding (left + right). Overrides `padding` on the X axis.
paddingY
—
Vertical padding (top + bottom). Overrides `padding` on the Y axis.
paddingTop
—
Padding on the top edge. Beats `padding` / `paddingY`.
paddingRight
—
Padding on the right (inline-end in RTL) edge.
paddingBottom
—
Padding on the bottom edge.
paddingLeft
—
Padding on the left (inline-start in RTL) edge.
margin
—
Margin on all four sides. Accepts the spacing scale or `"auto"`.
marginX
—
Horizontal margin (left + right). Use `"auto"` to centre.
marginY
—
Vertical margin (top + bottom).
marginTop
—
Margin on the top edge.
marginRight
—
Margin on the right edge.
marginBottom
—
Margin on the bottom edge.
marginLeft
—
Margin on the left edge.
width
—
Element width. Accepts a `SpaceToken`, `LengthValue`, or named alias.
height
—
Element height. Accepts a `SpaceToken`, `LengthValue`, or named alias.
minWidth
—
Minimum width — useful for preventing flex children from collapsing.
maxWidth
—
Maximum width — `"prose"` caps to a comfortable reading measure.
minHeight
—
Minimum height.
maxHeight
—
Maximum height.
background
—
Background colour. Use a `ColorToken` like `"bg.surface"` for theme awareness.
color
—
Text colour. Inherits unless set.
borderColor
—
Border colour. Pair with `borderWidth` to make the border visible.
borderWidth
—
Border thickness in scale steps.
borderStyle
—
Border line style.
borderRadius
—
Corner rounding token.
boxShadow
—
Drop-shadow token from the elevation scale.
opacity
Responsive<number | `${number}`>
—
Opacity 0–1. Use sparingly — prefer surface tokens over translucency.
overflow
—
How content that exceeds the box is handled.
overflowX
—
Horizontal-axis overflow control. Overrides `overflow` for the X axis.
overflowY
—
Vertical-axis overflow control.
display
—
CSS `display` value. `"contents"` removes the element's box from layout.
position
—
CSS `position`. Pair with `top`/`right`/`bottom`/`left` for placement.
top
—
Top inset (when positioned). Accepts a `SpaceToken`, `"auto"`, `"0"`, or `LengthValue`.
right
—
Right inset (when positioned).
bottom
—
Bottom inset (when positioned).
left
—
Left inset (when positioned).
zIndex
—
Stacking-context layer token (`"modal"`, `"tooltip"`, …).
gridColumn
Responsive<string>
—
Grid-column shorthand (e.g. `"1 / 3"`, `"span 2"`).
gridRow
Responsive<string>
—
Grid-row shorthand.
gridArea
Responsive<string>
—
Named grid area.
flex
Responsive<"1" | "none" | "auto" | "initial" | (string & {})>
—
Shorthand: `1 | auto | none | initial | <css>`. Resolves to `flex` on the child.
flexGrow
Responsive<number | `${number}`>
—
Grow factor inside a flex container.
flexShrink
Responsive<number | `${number}`>
—
Shrink factor inside a flex container.
flexBasis
Responsive<"content" | SizeValue>
—
Initial main-axis size before grow/shrink.
alignSelf
—
Override `align-items` for a single child.
justifySelf
—
Override `justify-items` for a single child (grid).
order
Responsive<number | `${number}`>
—
Flex/grid child reorder index.
asChild
boolean
—
When `true`, renders the primitive's single React child via `Slot`, forwarding className/style/ref/event handlers onto it.

Accessibility

Section titled “Accessibility”
  • Renders a native <mark> by default — assistive tech announces the content as highlighted. Pass as="span" when the highlight is purely decorative and the surrounding context already conveys meaning.
  • Pair colour with copy: never rely on the highlight alone to communicate meaning (e.g. “deprecated” highlights should still include a textual indicator).
  • Pass a title for the common tooltip case (title="Match #3").
  • Under forced-colors (Windows High Contrast and similar) Mark falls back to the system Mark/MarkText colour pair so highlights stay visible when the token palette is overridden.

Recipes

Section titled “Recipes”
  • Search hits — feed regex match ranges into HighlightedText to highlight every occurrence in a snippet.
  • Diff hunks — variant="chip" with colorScheme="success" / colorScheme="danger" reads as add/remove without needing a full diff viewer.
  • Form validation — point at the invalid slice of an input with variant="underline" and colorScheme="danger"; surface a title for the rule that fired.
  • Inline syntax — variant="bold" colours keywords/numbers in a one-liner without dragging in a syntax-highlighting dependency.