TypographyBrick 0.1.12

Highlight

Highlight discovers literal queries in plain text through exact Atom behavior and renders finished semantic match styling.

Live example

Built from the published package

Interactive

FLOWSTACK keeps C++ and café searches literal, predictable, and accessible.

Choose with confidence

Know when Highlight is the right part

Use it when

Use Highlight when one plain text string needs deterministic visible query matches.

Choose another path when

Use Mark when relevance is already authored. Keep arbitrary React-node traversal, active-result navigation, result counts, search input state, and announcements in the application.

Installation and imports

tsx

import { Highlight } from "@flowstack-ui/brick/highlight";
import "@flowstack-ui/brick/styles.css";

For modular CSS:

tsx

import "@flowstack-ui/brick/styles/core.css";
import "@flowstack-ui/brick/styles/highlight.css";

Highlight and its public types are also available from @flowstack-ui/brick.

Quick start

tsx

<Highlight text="Build durable interfaces" query="durable" />

Visual recipes and states

Subtle provides quiet filled relevance, solid provides stronger contrast, and underline preserves an unfilled reading surface. Accent and neutral are semantic tones. These are passive recipes, not active-search-result state.

Examples

tsx

<Text as="p">
  <Highlight
    exactMatch
    query={["design", "system"]}
    text="A design system makes design decisions repeatable."
    variant="underline"
  />
</Text>

Public contract

API

Start with the public parts and root options below. Components with multiple parts separate each area into its own named subsection.

Prop	Values	Default
`text`	plain `string`	required
`query`	`string` or readonly string array	required
`ignoreCase`	`boolean`	`true`
`matchAll`	`boolean`	`true`
`exactMatch`	`boolean`	`false`
`variant`	`subtle`, `solid`, `underline`	`subtle`
`tone`	`accent`, `neutral`	`accent`

Public exports are Highlight, HighlightProps, HighlightVariant, and HighlightTone.

Shared responsibility

Accessibility

Native mark communicates relevance in context. Highlight adds no focus, role, live region, search result count, or keyboard behavior. Forced colors uses system highlight colors for filled recipes and system underline visibility for underline.

Responsive behavior

Highlight stays inline, preserves whitespace and text order, and wraps with surrounding copy. Each marked fragment uses cloned inline decoration across line breaks.

Stable visual contract

Styling and tokens

Customization

Choose variant and tone first, then documented variables for a deliberate local recipe. Do not restyle Atom internals other than the documented match slot.

Tokens and CSS hooks

Use .brick-highlight, [data-slot="highlight-match"], data-slot, data-tone, data-variant, --brick-highlight-background, --brick-highlight-foreground, --brick-highlight-radius, --brick-highlight-padding-inline, --brick-highlight-decoration-color, --brick-highlight-decoration-thickness, and --brick-highlight-decoration-offset.

Advanced reference

Open these details only when you need to inspect DOM ownership, native forwarding, or lower-level composition.

Maintainer resources

Tests, playground evidence, source notes, and release history remain available without crowding the plug-and-play guide.

Source docs Changelog Playground