Link
The Link component is designed to provide a consistent and accessible way to handle both internal and external links in your application.
Usage
First of all, you need to import the Link
component from the kitchn
package.
import { Link } from "kitchn"
Default
Using onClick
Disabled
Non Text
Variants
Highlight
Primary
Secondary
Blend
Fragment Link (Anchor)
Internal Href
External Href
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. |