Link | Pol-ui - A beautiful and functional UI library for React and Next.js

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>
      <Link>About</Link>
    </NextLink>
  );
}

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;

Props

The Link component has the following props:

Prop name	Type	Default	Description
as	ElementType	a	The HTML tag to render the component as.
theme	LinkTheme		The theme to be applied to the component.

💡

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

Theme

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

interface LinkTheme {
  base: string;
  href: string;
}