Documentation
Link

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

NameTypeDefaultRequiredDescription
hrefstring | UrlObjectundefinedNoThe URL to navigate to when the link is clicked.
onClick(_event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => voidundefinedNoFunction to handle click events.
disabledbooleanfalseNoDisables the link, preventing navigation and modifying its styling.
variant"highlight" | "primary" | "secondary" | "blend"undefinedNoSpecifies the visual style of the link.

FragmentLink Props

NameTypeDefaultRequiredDescription
idstringundefinedYesThe ID of the element to link to within the page.