Typography@knitui/components

Mark

Mark renders highlighted inline text — a semantic <mark> on web with a tinted fill. The tint comes from the active theme ramp ($color5 fill, $color12 text), so the theme prop recolors it with no per-component logic. Inherits the full Text surface (size, fw, truncate, …).

WebiOSAndroid0 own props7 examples

Stories Source Tests Open in Storybook

import { Mark } from "@knitui/components";

Playground

Loading playground…

children

themeActive theme accent — recolors the mark via the palette ramp.

sizeFont-size + line-height pair inherited from the Text surface.

fontWeightFont weight inherited from the Text surface.

Playground

<Mark>
  highlighted text
</Mark>

Examples

Themed

Every accent theme applied to the same highlighted word.

Loading example…

ThemedSource Storybook

Sizes

Inherited Text sizes from xxs to xxl.

Loading example…

SizesSource Storybook

In Paragraph

Mark used inline inside a paragraph of running text — the typical use case.

Loading example…

In ParagraphSource Storybook

Multiple Marks

Multiple marks in sequence to verify spacing and line-height remain consistent.

Loading example…

Multiple MarksSource Storybook

Bold Mark

Heavier font weight for emphasis alongside the background tint.

Loading example…

Bold MarkSource Storybook

Truncated

Long text with truncate enabled — the highlight clips to a single line.

Loading example…

TruncatedSource Storybook

Props

Prop	Type	Default	Description
`disabled` system	`boolean \| undefined`	—	Specifies the disabled state of the text view for testing purposes.
`size` system	`"xs" \| "sm" \| "md" \| "lg" \| "xl" \| "xxs" \| "xxl" \| undefined` xxs · xs · sm · md · lg · xl · xxl	—	Font-size + line-height pair inherited from the Text surface.
`theme` system	`ThemeName \| null \| undefined` unset · yellow · blue · red · green · pink · gray	—	Active theme accent — recolors the mark via the palette ramp.

Accessibility & DOM props (2)

Prop	Type
`key`	`Key \| null \| undefined`
`ref`	`Ref<TamaguiTextElement> \| undefined`

Plus 507 inherited style props from Box — the full Tamagui/React Native style surface, including token shorthands like p, mx, bg and c. See Tokens for the scales they accept, or the full list.