Skip to main content
Elastic UI
Elastic UI
Getting startedComponentsPatternsContentData visualization
EUI ChangelogGitHubFigma
  • Setup
  • Theming
  • Accessibility
  • Testing
  • Utilities
    • Accessibility
    • Auto sizer
    • Color palettes
    • Copy
    • CSS utility classes
    • Delay
    • Error boundary
    • Focus trap
    • Highlight and mark
    • HTML ID generator
    • I18n
    • Inner text
    • Mutation observer
    • Outside click detector
    • Overlay mask
    • Portal
    • Pretty duration
    • Provider
    • Resize observer
    • Scroll
    • Text diff
    • Text truncation
    • Window events
  • EUI
  • Utilities
  • Highlight and mark

Highlight and mark

Highlight

Use EuiHighlight to highlight substrings within a string, typically in response to user input.

Loading...

Mark

Use EuiMark to wrap a string in a

mark element.

Loading...

Props

EuiHighlight

Extends HTMLAttributes
𐘂𐘂
✄𐘗✄𐘗
Prop
↦
Description and type
↦
Default value
↵
Prop
search#
↦
Description and type

What to search for.

Allows passing an array of strings (searching by multiple separate
words or phrases) only if highlightAll is also set to true.

Type: string | string[]
↦
Default value
Required
↵
Prop
className#
↦
Description and type
Type: string
↦
Default value
↵
Prop
aria-label#
↦
Description and type

Defines a string value that labels the current element.
@see aria-labelledby.

Type: string
↦
Default value
↵
Prop
children#
↦
Description and type

string to highlight as this component's content

Type: ReactNode & string
↦
Default value
↵
Prop
hasScreenReaderHelpText#
↦
Description and type

Set to false to remove the CSS :before and :after
screen reader helper text

Type: boolean
↦
Default value
true
↵
Prop
data-test-subj#
↦
Description and type
Type: string
↦
Default value
↵
Prop
css#
↦
Description and type
Type: Interpolation<Theme>
↦
Default value
↵
Prop
strict#
↦
Description and type

Should the search be strict or not

Type: boolean
↦
Default value
false
↵
Prop
highlightAll#
↦
Description and type

Should highlight all matches

Type: boolean
↦
Default value
false
↵
𐘂𐘂

EuiMark

Extends HTMLAttributes
𐘂𐘂
✄𐘗✄𐘗
Prop
↦
Description and type
↦
Default value
↵
Prop
className#
↦
Description and type
Type: string
↦
Default value
↵
Prop
aria-label#
↦
Description and type

Defines a string value that labels the current element.
@see aria-labelledby.

Type: string
↦
Default value
↵
Prop
children#
↦
Description and type

ReactNode to render as this component's content

Type: ReactNode
↦
Default value
↵
Prop
data-test-subj#
↦
Description and type
Type: string
↦
Default value
↵
Prop
css#
↦
Description and type
Type: Interpolation<Theme>
↦
Default value
↵
Prop
hasScreenReaderHelpText#
↦
Description and type

Set to false to remove the CSS :before and :after
screen reader helper text

Type: boolean
↦
Default value
true
↵
𐘂𐘂
Edit this page

Previous
Focus trap
Next
HTML ID generator
  • Highlight
  • Mark
  • Props
EUI is dual-licensed under Elastic License 2.0 and Server Side Public License, v 1 | Crafted with ❤ by Elastic