---
title: Highlight
description: Text with highlighted query matches
visibility: guest
draft: false
---

# Highlight

A text component that visually highlights matching substrings via a `query` prop. Useful for search-result lists where the matching positions are runtime-determined.

> **Highlight vs. Mark:** [`<x-wirekit::highlight>`](/components/highlight) wraps every occurrence of `query` inside the slot dynamically. [`<x-wirekit::mark>`](/components/mark) is a static wrapper — author decides where the `<mark>` goes. Use Highlight for query/search-match rendering, Mark for editorial emphasis where the highlighted region is known at author-time.

## Basic Usage

:::preview{title="Highlighted query match"}
<x-wirekit::highlight query="WireKit">Build with WireKit for Laravel Livewire.</x-wirekit::highlight>
:::

## Multiple Matches

All occurrences of the query are highlighted.

:::preview{title="Multiple matches"}
<x-wirekit::highlight query="the">The quick brown fox jumps over the lazy dog.</x-wirekit::highlight>
:::

## Case-Insensitive

Matching is case-insensitive, but the original casing is preserved in the output.

:::preview{title="Case-insensitive matching"}
<x-wirekit::highlight query="laravel">Use Laravel, laravel, or LARAVEL — all match.</x-wirekit::highlight>
:::

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `query` | string\|null | `null` | Substring to search for and highlight |
| `as` | string | `'span'` | HTML element to render |
| `scope` | string\|null | `null` | Scoped personalization name |

## Keyboard Interaction

This component is purely presentational and does not respond to keyboard input.

## Design Tokens

Highlighted matches use the same tokens as [Mark](/components/mark):

| Token | Used for |
| --- | --- |
| `--color-wk-warning-bg` | Highlight background |
| `--color-wk-text` | Text color |
| `--radius-wk-sm` | Border radius |