Server Component · 0 KB client JS

Link

An inline text link with accent-channel coloring and external-link handling.

Read the getting-started guide before launch.

External: react.dev (opens in new tab) (new tab, safe rel).

import { Link, Text, VStack } from "astralis-ui";

export function LinkDemo() {
  return (
    <VStack gap="2" alignItems="start">
      <Text>
        Read the <Link href="/docs">getting-started guide</Link> before launch.
      </Text>
      <Text>
        Always underlined: <Link href="/docs" variant="underline">theming reference</Link>.
      </Text>
      <Text>
        External: <Link href="https://react.dev" external>react.dev</Link> (new tab, safe rel).
      </Text>
      <Text>
        Any hue: <Link href="/docs" colorScheme="purple">purple link</Link>,{" "}
        <Link href="/docs" colorScheme="green">green link</Link>.
      </Text>
    </VStack>
  );
}

Read the docs

Content

variant

colorScheme

external

lineClamp

import { Link } from "astralis-ui";

<Link>Read the docs</Link>

Import#

import { Link } from "astralis-ui";

For client-side routing, pass your router's component: <Link as={NextLink} href="/docs">.

Line clamp#

lineClamp cuts a long link off after that many lines with an ellipsis, which keeps card titles and list rows even. The full text stays in the DOM, so screen readers and search still get all of it.

Theming Astralis for a brand that ships light and dark palettes, runtime accent colors and per-component overrides

import { Box, Link } from "astralis-ui";

export function LinkLineClamp() {
  return (
    <Box maxW="xs">
      <Link href="/docs/theming" lineClamp="2" weight="medium">
        Theming Astralis for a brand that ships light and dark palettes, runtime accent
        colors and per-component overrides
      </Link>
    </Box>
  );
}

Props#

Prop	Type	Default	Description
`variant`	`"underline" \| "hover" \| "plain"`	`"hover"`	Underline behavior.
`colorScheme`	`all 15 schemes`	`"brand"`	Hue (via the accent channel).
`external`	`boolean`	`false`	New tab + `rel="noopener noreferrer"` + ↗ marker.
`lineClamp`	`"1" \| "2" \| "3" \| "4" \| "5" \| "6"`	None	Truncates a long link to this many lines with an ellipsis. Responsive.
`as`	`ElementType`	`"a"`	Router link component.

A link is text with special highlighting, so it also takes every Text typography prop (size, weight, color, casing, align, lineHeight, letterSpacing), each responsive.

Unlike Text it defaults none of them. A bare <Link> emits no type classes at all, so it inherits from the paragraph around it, which is what an inline link should do:

<Text size="sm">
  Small copy with an <Link href="#">inline link</Link> that stays small.
</Text>

<Link href="#" size="lg" weight="semibold">A large standalone link</Link>

Setting color explicitly holds it in both states: the hover colour shift is dropped rather than swapping your colour out from under you, and variant's underline carries the affordance instead. That is what makes a link usable on a surface the accent channel does not cover:

<Box bg="inverted" p="6">
  <Link href="#" color="inverted" variant="hover">Readable on the inverted fill</Link>
</Box>