Documentation
Components
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

Code Editor
<Link href={"/"}>{"Return to menu"}</Link>

Using onClick

Code Editor
<Link onClick={() => router.push("/")}>{"Return to menu"}</Link>

Disabled

Code Editor
<Container gap={"small"}>
  <Link disabled>{"Disabled link"}</Link>
  <Link href={undefined} onClick={undefined}>
    {"Disabled link (no href or onClick)"}
  </Link>
  <Link href={"#"} disabled>
    {"Disabled link (href=#)"}
  </Link>
</Container>

Non Text

Code Editor
<Link href={"/"}>
  <Badge>{"This entire badge is wrapped in a link"}</Badge>
</Link>

Variants

Highlight

Code Editor
<Link href={"#"} variant={"highlight"}>
  {"Highlight variant"}
</Link>

Primary

Code Editor
<Link href={"#"} variant={"primary"}>
  {"Primary variant"}
</Link>

Secondary

Code Editor
<Link href={"#"} variant={"secondary"}>
  {"Secondary variant"}
</Link>

Blend

Blend variant works well with themed components.
Code Editor
<Note type={"danger"} label={false}>
  <Link href={"#"} variant={"blend"}>
    {"Blend variant"}
  </Link>{" "}
  {"works well with themed components."}
</Note>

Fragment Link (Anchor)

Code Editor
<FragmentLink id={"fragment-link-example"}>
  {"Click on this to jump to this section of the page"}
</FragmentLink>

Internal Href

Code Editor
<Link href={"/"}>{"Click on this to jump back to the menu"}</Link>

External Href

Code Editor
<Link href={"https://tonightpass.com/"}>
  {"Click on this to go to our website"}
</Link>

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.
Last updated on
InputModal