Mark

The Mark component allows you to highlight specific parts of text for emphasis.

 import {VKMark} from "@vivakits/react-components";

Highlight specific strings within a paragraph using the Mark component.

From the entire paragraph user can mark string as per requirments

You can choose from various variants to style your marked text in different ways.

The Cat silently watched outside the window.

The Dog silently watched outside the window.

The Bird silently watched outside the window.

You have the flexibility to choose a color for the Mark component to align with your design needs.

You can emphasize text using the primary color with a solid background.

The secondary color can be used to highlight important information with text style.

For a successful highlight, try the success color with no background.

If you need to indicate a danger, use the danger color with a solid background.

For a cautionary highlight, use the warning color with text style.

Highlight your text with the dark color for emphasis and no background.

Make the text stand out with the light color, using a solid background.

Attribute	Type	Description	Default
children	ReactNode	Display a part of content	-
variant	SolidTextPlain	For choosing different variant	solid
color	primarysecondarysuccessdangerwarningdarklight	Changes highlighted content background color	primary
className	string	Additional CSS applied to mark components	-