Highlight
The Highlight component is used to emphasize the boundaries of an element on the page by applying a highlight effect. It dynamically adjusts to the dimensions and position of the target element, and supports customization for width, height, and opacity ratios.
Usage
First of all, you need to import the Highlight component from the kitchn package.
import { Highlight } from "kitchn"Default
Props
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
href | string | UrlObject | undefined | No | The URL to navigate to when the link is clicked. |
onClick | (_event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => void | undefined | No | Function to handle click events. |
disabled | boolean | false | No | Disables the link, preventing navigation and modifying its styling. |
variant | "highlight" | "primary" | "secondary" | "blend" | undefined | No | Specifies the visual style of the link. |
FragmentLink Props
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
id | string | undefined | Yes | The ID of the element to link to within the page. |