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. |