Anchor

Inline link with primary and subtle variants.

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

Variants

primary — the default subtle — for secondary navigation

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

Sizes

size xl size lg size md size sm size xs

<Anchor href="https://github.com/koki-develop/ps1ui" size="xl">size xl</Anchor>
<Anchor href="https://github.com/koki-develop/ps1ui" size="lg">size lg</Anchor>
<Anchor href="https://github.com/koki-develop/ps1ui" size="md">size md</Anchor>
<Anchor href="https://github.com/koki-develop/ps1ui" size="sm">size sm</Anchor>
<Anchor href="https://github.com/koki-develop/ps1ui" size="xs">size xs</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>

Leading / trailing slots

live↗source↗←back to all posts

<Anchor href="https://example.com" trailing="↗">live</Anchor>
<Anchor href="https://example.com" variant="subtle" trailing="↗">source</Anchor>
<Anchor href="/posts" leading="←">back to all posts</Anchor>

Leading / trailing slots (icon component)

Both slots accept any ReactNode, so an icon component drops in the same way — this docs page cannot render the JSX form directly (Astro cannot serialise React children passed as a prop), but the pattern above is how consumers use it in real .tsx code. Decorative icons should carry aria-hidden so the link's accessible name stays the label text alone.

import { IconExternalLink } from "your-icon-library";

<Anchor href="https://example.com" trailing={<IconExternalLink aria-hidden />}>
  live
</Anchor>

Adorned link in running text

The demo is deployed at example.com↗ and the code is on GitHub.

<Text>
  The demo is deployed at{" "}
  <Anchor href="https://example.com" trailing="↗">example.com</Anchor>{" "}
  and the code is on GitHub.
</Text>

Inherited size

An inline link in xl copy.

An inline link in xs copy.

{/* No size prop — the link takes the surrounding text's size. */}
<Text size="xl">
  An <Anchor href="https://github.com/koki-develop/ps1ui">inline link</Anchor> in xl copy.
</Text>
<Text size="xs">
  An <Anchor href="https://github.com/koki-develop/ps1ui">inline link</Anchor> in xs copy.
</Text>

An adorned link becomes an inline flex row, so it stays inline-level and never breaks between the label and its icon. The underline moves to the label alone: a decoration inherited from the row would paint under the icon while skipping the gap, rendering one link as two disconnected dashes.

Props

Prop	Type	Default	Description
`as`	`ElementType`	`"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.
`size`	`"xs" \| "sm" \| "md" \| "lg" \| "xl"`	—	Font size on the type scale. Left unset, the link inherits the surrounding text's size.
`leading`	`ReactNode`	—	Leading element (typically an icon) rendered before children with a shared inline gap.
`trailing`	`ReactNode`	—	Trailing element (typically an icon) rendered after children with a shared inline gap.

Also accepts the attributes of the element rendered via as (default: <a>).