Link

The Link component is used for navigating between pages and can include additional styling, hover effects, and icons.

Default

By default, links are underlined and use text-gray-900 with a text-gray-600 hover color.

This is a default link
import Link from "../../components/Link";
<Link href="#">This is a default link</Link>

Variants

You can customize the color and remove the underline.
Blue link No underline
<Link href="#" color="text-blue-500">Blue link</Link>
<Link href="#" color="text-pink-600" underline={false}>No underline</Link>

Links with icons

Icons can be placed before or after the link text.
Go forward Go back
<Link href="#" icon="ArrowRight" iconPosition="after">Go forward</Link>
<Link href="#" icon="ArrowLeft" iconPosition="before">Go back</Link>