Mark

Highlight part of the text with a background color.

Import


import { Mark } from '@tidbcloud/uikit'

Basic Usage


import { Text, Mark } from '@tidbcloud/uikit'
 
function Demo() {
  return (
    <Text>
      Highlight <Mark>this chunk</Mark> of the text
    </Text>
  )
}

Custom Color


import { Text, Mark } from '@tidbcloud/uikit'
 
function Demo() {
  return (
    <Text>
      Highlight <Mark color="blue">with blue</Mark> or <Mark color="red.3">with red</Mark>
    </Text>
  )
}

Key Props

Prop	Type	Description
`color`	`MantineColor`	Background color from theme or any valid CSS color