Import
import { Link } from "@prismane/core";
Usage
<Link href="#">Click Me</Link>
Link Underline Styles
<> <Link href="#" underline="none"> No Underline </Link> <Link href="#" underline="hover"> Hover for Underline </Link> <Link href="#" underline="always"> Always Underlined </Link> </>
Foreign Link
Links that have the foreign prop will open in a blank page.
<Link href="https://www.google.com" foreign> I will open in a blank page </Link>
Before Function
Link exposes the support for a before function, which will execute, before the user is redirected.
<Link before={async () => { console.log("Redirecting..."); }} href="https://www.google.com" foreign > I will log to console, before redirecting </Link>
Link Color
You can change the color of the Link component, by providing a value to the cl prop. This will also result in a change of the underline color.
<Link cl="primary" href="https://www.google.com" foreign> I will log to console, before redirecting </Link>
Link Underline Color
You can change the color by providing a value to the sx prop and setting the text-decoration-color property.
<Link href="#" sx={{ textDecorationColor: "lime", }} > I have a different underline color </Link>
Link Underline Thickness
You can change the thickness by providing a value to the sx prop and setting the text-decoration-thickness property.
<Link href="#" sx={{ textDecorationThickness: "4px", }} > I have a thicker underline </Link>
Link Underline Style
You can change the style of the underline by providing a value to the sx prop and setting the text-decoration-style property.
<Link href="#" sx={{ textDecorationStyle: "wavy", }} > I have a wavy underline </Link>
Versatile Component
<Link as="strong" href="https://www.google.com" foreign> Click Me </Link>
API
Please refer to the documentation below for a comprehensive overview of all the available props and classes for the mentioned components.
- -
Link