Highlight

Wraps matches of a query in styled <mark> elements — search-result emphasis in prose.

Astralis paints every component with semantic tokens, so one brand color and a dark-mode class restyle the whole library.

import { Highlight, Text, Box } from "astralis-ui";

export function HighlightDemo() {
  return (
    <Box maxW="md">
      <Text>
        <Highlight query="semantic tokens">
          Astralis paints every component with semantic tokens, so one brand
          color and a dark-mode class restyle the whole library.
        </Highlight>
      </Text>
    </Box>
  );
}

Import#

import { Highlight } from "astralis-ui";

Usage#

Give it a plain string as children plus a query (string or array), and each match becomes a real <mark> — semantic emphasis that screen readers can announce. Matching is case-insensitive by default.

Multiple queries: eight planets, hundreds of moons.

The solid variant fills the mark with the full yellow.

Set ignoreCase to false and only exact CASE matches — not case — light up.

import { Highlight, Text, VStack } from "astralis-ui";

export function HighlightVariants() {
  return (
    <VStack gap="3" alignItems="start" maxW="md">
      <Text>
        <Highlight query={["planets", "moons"]}>
          Multiple queries: eight planets, hundreds of moons.
        </Highlight>
      </Text>
      <Text>
        <Highlight query="solid" variant="solid">
          The solid variant fills the mark with the full yellow.
        </Highlight>
      </Text>
      <Text>
        <Highlight query="CASE" ignoreCase={false}>
          Set ignoreCase to false and only exact CASE matches — not case — light up.
        </Highlight>
      </Text>
    </VStack>
  );
}

Props#

Prop	Type	Default	Description
`children`	`string`	required	The plain text to scan.
`query`	`string \| string[]`	required	Substring(s) to mark.
`ignoreCase`	`boolean`	`true`	Case-insensitive matching.
`variant`	`"subtle" \| "solid"`	`"subtle"`	Tinted or fully filled marks.
`markClassName`	`string`	—	Extra class for each `<mark>`.