Highlight
Highlight Component
Playground
The quick brown fox jumps over the lazy dog
Props
| Prop | Type | Default | Value |
|---|---|---|---|
| text | text | — | |
| query | text | — | |
| highlightColor | color | — | |
| caseSensitive | boolean | — |
DefaultThe quick brown fox jumps over the lazy dog
CaseSensitive
React is popular. react is great.React is popular. react is great.
MultipleMatchesThe design system provides design tokens, design components, and design patterns.
NoMatchReact and Vue are popular frameworks.
| PROP | TYPE | DEFAULT | DESCRIPTION |
|---|---|---|---|
caseSensitive | boolean | — | Case-sensitive matching |
highlightColor | color | — | Custom highlight color |
query | text | — | Search query to highlight |
text | text | — | Full text to display |
Using Highlighttsx
import { Highlight } from '@/components/Highlight'
<Highlight
text="..."
query="..."
highlightColor="..."
caseSensitive="..."
/>Tokens Used
No design tokens detected