Actions

Link

A real anchor for travelling to another URL.

When to use it: Use it when the result is navigation, not a local action.

On this page

Example
Anatomy
Step by step
Keyboard
Forms and accessibility
API reference

Example

Link.tsxtsx

import { useState } from "react";
import { Link } from "@comp0/react";

export function Example() {
  const [followed, setFollowed] = useState(false);

  return (
    <p className="text-base text-zinc-700 sm:text-sm dark:text-zinc-300">
      <Link
        href="#link-example"
        className="text-teal-700 underline underline-offset-4 dark:text-teal-300"
        onClick={(event) => {
          event.preventDefault();
          setFollowed(true);
        }}
      >
        {followed ? "Thanks for following" : "Read the guide"}
      </Link>
    </p>
  );
}

Anatomy

Dashed frames are invisible state providers; shaded shapes own real DOM. Numbered pins match the list below.

Link
Native anchor element. Owns a DOM element.

Step by step

1
Add the main part
Add Link at the place people need to leave from.
2
Add the supporting parts
Set href to the real destination.
3
Make the behavior clear
Use words that say where the destination is.
Exampletsx
```
<Link href="/settings">Settings</Link>
```

Keyboard

↵: Follows the link.

Forms and accessibility

Links do not submit forms.

Accessibility checklist

Make link text say where it goes.
Do not use a Link for an in-page action.
Keep the current page identifiable in a breadcrumb trail.

API reference

Importtsx

import { Link } from "@comp0/react";

`Link`

DOM element

Native anchor element.

Prop	Type	Description
`href`	`string`	Destination URL; removed while disabled.
`target / rel`	`string`	Native anchor behavior for new tabs and referrers.
`disabled`	`boolean`	Removes the link from the tab order and blocks clicks.
`as`	`ElementType`	Renders another element with link semantics restored.

Style hooks

Attributes that appear while a state is true. Target them with Tailwind data variants such as data-open:bg-zinc-100, or with any CSS selector.

[data-disabled] on Link: The link is unavailable.
[data-focused] on Link: The link has focus.