Link

Anchor element for creating hyperlinks.

#
Documentation

This is a regular link and this is a visited link


import { Link, Text } from "@optiaxiom/react";
 
export function App() {
  return (
    <Text>
      This is <Link href="data:,">a regular link</Link> and this is{" "}
      <Link href="">a visited link</Link>
    </Text>
  );
}

#
Appearance

Use the appearance prop to select between the different link appearances.

Link

Appearance


"use client";
 
import type { ComponentPropsWithRef } from "react";
 
import { Link } from "@optiaxiom/react";
 
import { Canvas } from "../Canvas";
 
export function App({
  appearance = "default",
}: Pick<ComponentPropsWithRef<typeof Link>, "appearance">) {
  return (
    <Canvas appearance={appearance}>
      <Link appearance={appearance} href="data:,">
        Link
      </Link>
    </Canvas>
  );
}

#
Disabled links

Set the disabled prop to true to style links to appear disabled and also prevent any interactions.

This is a disabled link

Disabled


"use client";
 
import type { ComponentPropsWithRef } from "react";
 
import { Link, Text } from "@optiaxiom/react";
 
export function App({
  disabled = true,
}: Pick<ComponentPropsWithRef<typeof Link>, "disabled">) {
  return (
    <Text>
      This is{" "}
      <Link disabled={disabled} href="data:,">
        a disabled link
      </Link>
    </Text>
  );
}

#
External links

Set the external prop to true to add an icon and set the correct rel and target attributes.

This is an external link

External


"use client";
 
import type { ComponentPropsWithRef } from "react";
 
import { Link, Text } from "@optiaxiom/react";
 
export function App({
  external = true,
}: Pick<ComponentPropsWithRef<typeof Link>, "external">) {
  return (
    <Text>
      This is{" "}
      <Link external={external} href="data:,">
        an external link
      </Link>
    </Text>
  );
}

#
Links as buttons

Set asChild to true and wrap children in a <button> element to render links as buttons.

This is


"use client";
 
import { Link, Text, toaster } from "@optiaxiom/react";
 
export function App() {
  return (
    <Text>
      This is{" "}
      <Link asChild href="data:,">
        <button onClick={() => toaster.create("Clicked!")}>
          actually a button
        </button>
      </Link>
    </Text>
  );
}

#
Props

#
Link

Supports all Box props in addition to its own. Renders an <a> element.

Prop
`appearance` Control the appearance by selecting between the different link types. `"default" \| "subtle" \| "inverse"` Default: `default`
`asChild` Change the default rendered element for the one passed as a child, merging their props and behavior. Read the Composition guide for more details. `false \| true`
`className` `string`
`cover` Whether to expand and fill up the whole area of the parent which has `position: relative`. `false \| true \| "inset"`
`disabled` Whether to show disabled state and disable interactions. `false \| true`
`external` Shows an external link icon and sets the correct rel/target attributes. `false \| true`

#
Changelog

#
0.1.0

Added component