Mark
Used to mark text for emphasis.
The design system is a collection of UI elements
import { Mark, Text } from "@chakra-ui/react"
export const MarkBasic = () => {
return (
<Text>
The <Mark variant="subtle">design system</Mark> is a collection of UI
elements
</Text>
)
}
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"
export const MarkWithVariants = () => {
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
| Prop | Default | Type |
|---|---|---|
colorPalette | 'gray' | 'gray' | 'zinc' | 'neutral' | 'stone' | 'red' | 'orange' | 'amber' | 'yellow' | 'lime' | 'green' | 'emerald' | 'teal' | 'cyan' | 'sky' | 'blue' | 'indigo' | 'violet' | 'purple' | 'fuchsia' | 'pink' | 'rose' | 'presence' | 'status' | 'sidebar' | 'sidebar.accent' | 'accent' | 'slate'The color palette of the component |
variant | 'subtle' | 'solid' | 'text' | 'plain'The variant of the component |