Components
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

1

Add Component

Insert code snippet into your project. Update import paths as needed.

import { ark } from '@ark-ui/react/factory'
import type { ComponentProps } from 'react'
import { styled } from 'styled-system/jsx'
import { link } from 'styled-system/recipes'

export const Link = styled(ark.a, link)
export interface LinkProps extends ComponentProps<typeof Link> {}
2

Add Recipe

This step is necessary only if you do not use any of the Park UI plugins.

import { defineRecipe } from '@pandacss/dev'

export const link = defineRecipe({
  className: 'link',
  base: {
    alignItems: 'center',
    color: 'fg.default',
    colorPalette: 'accent',
    cursor: 'pointer',
    display: 'inline-flex',
    fontWeight: 'medium',
    gap: '2',
    textDecoration: 'underline 0.1em transparent',
    textUnderlineOffset: '0.125em',
    transitionDuration: 'normal',
    transitionProperty: 'text-decoration-color',
    transitionTimingFunction: 'default',
    _hover: {
      textDecorationColor: 'colorPalette.default',
    },
    '& svg': {
      width: '1em',
      height: '1em',
    },
  },
})

Previous

Kbd

Next

Text