Skip to main content
Elastic UI
Elastic UI
ComponentsPatternsContentData visualization
EUI ChangelogGitHubFigma
  • Guidelines
    • Getting started
    • Accessibility
    • Writing
    • Testing
  • Theming
    • Theme provider
    • Color mode
    • Borders
    • Breakpoints
    • Colors
    • Sizing
  • Templates
    • Page template
    • Sitewide search
  • Layout
    • Accordion
    • Bottom bar
    • Flex
    • Flyout
    • Header
    • Horizontal rule
    • Modal
    • Page components
    • Page header
    • Panel
    • Popover
    • Resizable container
    • Spacer
  • Navigation
    • Breadcrumbs
    • Button
    • Collapsible nav
    • Context menu
    • Facet
    • Key pad menu
    • Link
    • Pagination
    • Side nav
    • Steps
    • Tabs
    • Tree view
  • Display
    • Aspect ratio
    • Avatar
    • Badge
    • Callout
    • Card
    • Comment list
    • Description list
    • Drag and drop
    • Empty prompt
    • Health
    • Icons
    • Image
    • List group
    • Loading
    • Progress
    • Skeleton
    • Stat
    • Text
    • Timeline
    • Title
    • Toast
    • Tooltip
    • Tour
  • Forms
    • Form layouts
    • Form validation
    • Text controls
    • Numeric controls
    • Selection controls
    • Search and filter controls
    • Date and time controls
    • Other controls
    • form_controls
    • selection_controls
  • Tabular content
    • Tables
    • Data grid
  • Editors & Syntax
    • Code
    • Markdown
  • Utilities
    • Auto sizer
    • Beacon
    • Color Palettes
    • Copy
    • Error boundary
    • Highlight and mark
    • I18n
  • 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
Error boundary
Next
I18n
  • Highlight
  • Mark
  • Props
EUI is dual-licensed under Elastic License 2.0 and Server Side Public License, v 1 | Crafted with ❤ by Elastic