Thedesign systemis a collection of UI elements
import { Mark, Text } from "@chakra-ui/react"
const Demo = () => {
return (
<Text>
The
<Mark variant="subtle" colorPalette="yellow">
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"
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>
)
}