Link is a light wrapper around the HTML anchor element

It adds default styling and the css prop.

Sizes

<Link href="http://example.com/" size="sm">
I'm a link
</Link>
<Link href="http://example.com/">I'm a link</Link>
<Link href="http://example.com/" size="lg">
I'm a link
</Link>

Capsize is used to size the text to the height of its capital letters, trimming the space above capital letters and below the baseline. This is removed when Link is nested within either Text, Heading or List components to ensure that it renders correctly.

<Text size="lg">
<Link href="http://example.com/">Adaptive online learning</Link> for ages
7-12+. Prepare your child for secondary school entry and beyond.
</Text>

Polymorphism

The Link component supports polymorphism, therefore depending on whether it receives an onClick/href as a prop, it will produce a button or link respectively

<Link href="http://example.com/">
I'm a link
</Link>
<Link onClick={() => console.log('clicked')}>
I'm a button
</Link>

API Reference

PropTypeDefaultRequired
size
"xs" | "sm" | "md" | "lg" | "xl"

-

-

noCapsize
boolean

-

-

asJSX.IntrinsicElements

-

-

cssCSSProperties

-

-