The Link component is a wrapper for an HTML a element, with a theme system to customize its appearance.

If you are using Next.js or Gatsby, you can use the Link component from pol-ui with the as prop to render the component as a Next.js or Gatsby link.

import { Link } from "pol-ui";
import NextLink from "next/link";
// For modern Next.js (>13.0.0)
export default function MyComponent() {
  return (
    <Link as={NextLink} href="/about" passHref>About</Link>
// For older versions of Next.js (same as passing an anchor to the next unstyled link)
export default function MyComponent() {
  return (
    <NextLink href="/about" passHref>

To start using the Label component you need to import it from pol-ui:

import { Label } from "pol-ui";

Default Link

import { Label } from "pol-ui";
const LabelComponent = () => {
  return <Label>Label</Label>;
export default LabelComponent;


The Link component has the following props:

Prop nameTypeDefaultDescription
asElementTypeaThe HTML tag to render the component as.
themeLinkThemeThe theme to be applied to the component.

You can also provide any prop comming from the HTML anchor tag.


To learn more about how to customize the appearance of components, please see the Theme docs.

interface LinkTheme {
  base: string;
  href: string;

Since February 21, 2024

Proudly Open Source
  • Npm

  • Github

  • Creator

  • Made with love and Pol-ui by Pol Gubau Amores