Highlight

Import

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

Highlight string

Highlight component render the main string as children and pass the string you want to highlight using the highlightText prop.

With the Highlight component, you can highlight your selection

Highlight Multiple string

You can Highlight mutiple selected string by passing all string as an array using the highlightText prop.

You can also highlight multiple selection to meet your requirments

Background Color

Enhance user experience by highlighting selections with seven different background colors. Using background prop you can easily customize background color.

Highlight selection with primary background color

Highlight selection with secondary background color

Highlight selection with success background color

Highlight selection with danger background color

Highlight selection with warning background color

Highlight selection with dark background color

Highlight selection with light background color

Border Radius

You can cahnge the corner radius using rounded prop.

You can remove corner radius and set it to none for your selection

You can change the corner radius to extra small for your selection

You can change the corner radius to small for your selection

You can change the corner radius to medium for your selection

You can change the corner radius to large for your selection

You can change the corner radius to full for your selection

Styles

You can make more cutomization to meet your design, using style or className prop.

Customize selection using style

Customize selection using className

API Reference

Attribute	Type	Description	Default
children	ReactNode	Displays main content	-
highlightText	string	Displays highlighted content	-
background	primarysecondarysuccessdangerwarningdarklight	Changes highlighted content background color	primary
rounded	defaultnonexssmmdlgfull	Changes highlighted content border radius	default
className	string	Additional CSS applied to highlight components	-
style	CSSProperties	Additional styles applied to highlight components	-

Group Input