Mark

Mark is a component that emphasizes a specific part of the text.

領域展開無量空処

<Text>
  領域展開<Mark colorScheme="warning">無量空処</Mark>
</Text>

Usage

import { Mark } from "@yamada-ui/react"

import { Mark } from "@/components/ui"

import { Mark } from "@workspaces/ui"

<Mark />

Change Variant

Solid

Subtle

Accent

<Wrap gap="md">
  <For each={["solid", "subtle", "accent"]}>
    {(variant, index) => (
      <Text key={index}>
        <Mark variant={variant} colorScheme="warning">
          {toTitleCase(variant)}
        </Mark>
      </Text>
    )}
  </For>
</Wrap>

Change Color Scheme

Success

Warning

<Wrap gap="md">
  <For each={["success", "warning"]}>
    {(colorScheme, index) => (
      <Text key={index}>
        <Mark colorScheme={colorScheme}>{toTitleCase(colorScheme)}</Mark>
      </Text>
    )}
  </For>
</Wrap>

Props

Prop	Default	Type / Description
`as`	-	`As` The HTML element to render.
`asChild`	-	`boolean` Merges its props onto its immediate child.
`css`	-	`CSSObject \| CSSObject[]` The CSS object.
`colorScheme`	-	`"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` Set color scheme variables.
`variant`	`"subtle"`	`"accent" \| "solid" \| "subtle" \| "text"` The variant of the component.

Similar Components

Blockquote is a component that represents a quotation. By default, it renders a blockquote element.

Code is a component that represents a code block. By default, it renders a code element.

Em is a component that represents emphasized text. By default, it renders a em element.

Heading is a component that represents section headings. By default, it renders an h1 element.

Highlight is a component that highlights specified strings within text. By default, it renders a p element.

Kbd is a component that represents keyboard input.

Text is a component that represents a paragraph of text. By default, it renders a p element.

Link is a component for creating hyperlinks to different web pages, locations within the same page, or other URLs.

Used By Components & Hooks

Highlight is a component that highlights specified strings within text. By default, it renders a p element.