Park UI Logo
GitHub
Typography
Link

Link

A semantic element for navigation between pages.

Usage

<Link href="https://park-ui.com">Park UI</Link>

Examples

With an Icon

<Link href="https://park-ui.com">
  Park UI <ExternalLinkIcon />
</Link>

As another element

The asChild property allows you to embed framework-specific link components, such as the one provided by Next.js, within your styled Link component, as shown below:

<Link asChild>
  <NextLink href="/about">About</NextLink>
</Link>

Font Size

Use textStyle for link size. It makes line height and spacing smaller as link size grows and also ensures link size is even for better layout.

<Flex direction="column">
  <Link textStyle="xs">Ag</Link>
  <Link textStyle="sm">Ag</Link>
  <Link textStyle="md">Ag</Link>
  <Link textStyle="lg">Ag</Link>
  <Link textStyle="xl">Ag</Link>
  <Link textStyle="2xl">Ag</Link>
  <Link textStyle="3xl">Ag</Link>
  <Link textStyle="4xl">Ag</Link>
  <Link textStyle="5xl">Ag</Link>
  <Link textStyle="6xl">Ag</Link>
  <Link textStyle="7xl">Ag</Link>
</Flex>

Font Weight

Use the fontWeight prop to set the font weight.

<Flex direction="column">
  <Link fontWeight="light">Park UI</Link>
  <Link fontWeight="normal">Park UI</Link>
  <Link fontWeight="medium">Park UI</Link>
  <Link fontWeight="semibold">Park UI</Link>
  <Link fontWeight="bold">Park UI</Link>
</Flex>

Installation

npx @park-ui/cli components add link