Anchor

Inline link with primary and subtle variants.

import { Anchor } from "@ps1ui/core";

Variants

<Anchor href="https://github.com/koki-develop/ps1ui">
  primary — the default
</Anchor>
<Anchor href="https://github.com/koki-develop/ps1ui" variant="subtle">
  subtle — for secondary navigation
</Anchor>

In running text

Anchors sit inline within running text, like this link to the repository.

<Text>
  Anchors sit inline within running text, like this link to the{" "}
  <Anchor href="https://github.com/koki-develop/ps1ui">repository</Anchor>.
</Text>

Props

PropTypeDefaultDescription
asElementType"a"

Element or component to render instead of the native <a> — e.g. a router Link.

variant"primary" | "subtle""primary"

Visual style: "primary" for standalone links, "subtle" for links inside running text.

Also accepts the attributes of the element rendered via as (default: <a>); ref is not supported.