Highlightpolymorphic

Highlight given part of a string with mark tag
Import
Source
View source code
Docs
Edit this page
Package
@mantine/core

Usage

Use Highlight component to highlight a substring in a given string with mark tag.

Pass main string as children to Highlight component and string part that should be highlighted to highlight prop. If main string does not include highlight part, it will be ignored. Component ignores trailing whitespace and highlights all matched characters sequence.

Highlight This, definitely THIS and also this!
HighlightColor
import { Highlight } from '@mantine/core';


function Demo() {
  return (
    <Highlight highlight="this">
      Highlight This, definitely THIS and also this!
    </Highlight>
  );
}

Highlight multiple substrings

To highlight multiple substrings, provide an array of values:

Highlight this and also that
import { Highlight } from '@mantine/core';


function Demo() {
  return <Highlight highlight={['this', 'that']}>Highlight this and also that</Highlight>;
}

Change highlight styles per substring

Highlight this, that, also this and also that
import { Highlight } from '@mantine/core';


function Demo() {
  return (
    <Highlight
      highlight={['this', 'that']}
      sx={(theme) => ({
        '& [data-highlight="this"]': { backgroundColor: theme.colors.grape[4] },
        '& [data-highlight="that"]': { backgroundColor: theme.colors.teal[4] },
      })}
    >
      Highlight this, that, also this and also that
    </Highlight>
  );
}

Change highlight styles

Default Mark styles can be overwritten with highlightStyles prop, it accepts either function with a subscription to theme or an object with styles:

You can change styles of highlighted part if you do not like default styles
import { Highlight } from '@mantine/core';


function Demo() {
  return (
    <Highlight
      align="center"
      highlight={['highlighted', 'default']}
      highlightStyles={(theme) => ({
        backgroundImage: theme.fn.linearGradient(45, theme.colors.cyan[5], theme.colors.indigo[5]),
        fontWeight: 700,
        WebkitBackgroundClip: 'text',
        WebkitTextFillColor: 'transparent',
      })}
    >
      You can change styles of highlighted part if you do not like default styles
    </Highlight>
  );
}

Text props

Highlight accepts the same props as Text component:

Mantine website
import { Highlight } from '@mantine/core';


function Demo() {
  return (
    <Highlight
      component="a"
      href="https://mantine.dev"
      target="_blank"
      highlight="mantine"
      fw={500}
    >
      Mantine website
    </Highlight>
  );
}
Go back
Code – @mantine/core
Up next
List – @mantine/core

Highlight component props

NameTypeDescription
align
"left" | "right" | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "center" | "end" | "start" | "justify" | "match-parent"
Sets text-align css property
children *
string
Full string part of which will be highlighted
color
DefaultMantineColor | "dimmed"
Key of theme.colors or any valid CSS color
gradient
MantineGradient
Controls gradient settings in gradient variant only
highlight *
string | string[]
Substring or an array of substrings to highlight in children
highlightColor
MantineColor
Color from theme that is used for highlighting
highlightStyles
CSSObject | ((theme: MantineTheme) => CSSObject)
Styles applied to highlighted part
inherit
boolean
Inherit font properties from parent element
inline
boolean
Sets line-height to 1 for centering
italic
boolean
Adds font-style: italic style
lineClamp
number
CSS -webkit-line-clamp property
size
number | "xs" | "sm" | "md" | "lg" | "xl"
Key of theme.fontSizes or any valid CSS value to set font-size
span
boolean
Shorthand for component="span"
strikethrough
boolean
Add strikethrough styles
transform
"-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "none" | "capitalize" | "full-size-kana" | "full-width" | "lowercase" | "uppercase"
Sets text-transform css property
truncate
true | "end" | "start"
CSS truncate overflowing text with an ellipsis
underline
boolean
Underline the text
variant
Variants<"text" | "gradient">
Link or text variant
weight
FontWeight
Sets font-weight css property
Build fully functional accessible web applications faster than ever
About
ContributeAbout MantineChangelogReleases
Community
Chat on DiscordFollow on TwitterFollow on GitHubGitHub discussions
Project
Mantine UIDocumentationGitHub organizationnpm organization
Built by Vitaly Rtishchev and these awesome people
Join Discord community
Follow Mantine on Twitter