Build faster with Premium Chakra UI Components 💎

Learn more
Skip to Content
DocsPlaygroundGuidesBlog
Sponsor

Mark

Used to mark text for emphasis.

The design system is a collection of UI elements

Usage

import { Mark } from "@chakra-ui/react"
<Text>
  The <Mark>design system</Mark> is a collection of UI elements
</Text>

Examples

Variants

Use the variant prop to change the color of the mark.

The design system is a collection of UI elements

The design system is a collection of UI elements

The design system is a collection of UI elements

The design system is a collection of UI elements

import { For, Mark, Stack, Text } from "@chakra-ui/react"

const Demo = () => {
  return (
    <Stack gap="6">
      <For each={["subtle", "solid", "text", "plain"]}>
        {(variant) => (
          <Text key={variant}>
            The <Mark variant={variant}>design system</Mark> is a collection of
            UI elements
          </Text>
        )}
      </For>
    </Stack>
  )
}

Props

PropDefaultType
colorPalette 'gray'
'gray' | 'red' | 'orange' | 'yellow' | 'green' | 'teal' | 'blue' | 'cyan' | 'purple' | 'pink'

The color palette of the component

as
React.ElementType

The underlying element to render.

asChild
boolean

Use the provided child element as the default rendered element, combining their props and behavior.

For more details, read our Composition guide.
variant
'subtle' | 'solid' | 'text' | 'plain'

The variant of the component

Previous

List

Next

Prose