Link
A semantic element for navigation between pages.
Usage
<Link href="https://tacos-ui.com">Tacos UI</Link>Examples
With an Icon
<Link href="https://tacos-ui.com">
Tacos 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">Tacos UI</Link>
<Link fontWeight="normal">Tacos UI</Link>
<Link fontWeight="medium">Tacos UI</Link>
<Link fontWeight="semibold">Tacos UI</Link>
<Link fontWeight="bold">Tacos UI</Link>
</Flex>