Link
The Link component implements the Typography component, but requires an href and will always render an <a> tag.
Examples
Basic link
<Link href="./">A link</Link>
With multiple sizes
A D1 linkageA D2 linkageAn H1 linkageAn H2 linkageAn H3 linkageA subhead linkageA body linkageA large body linkageA small body linkageA caption linkageA meta linkageA CTA body linkage
<Link href="./">A link</Link>
With a router library
import { Link: RouterLink } from 'react-router-dom';
<Link as={RouterLink} to="./">A router link</Link>;
Props
| Name | Type | Default Value | Required | Description |
|---|---|---|---|---|
italic | boolean | false | No | Display the text with emphasis? |
size | "body" | "caption" | "h1" | "h2" | "h3" | "meta" | "inherit" | TypographySize | "d1" | "d1-alt" | "d2" | "subhead" | "body-lg" | "body-sm" | "cta" | TypographySize.Body | No | How large should the text be? This also affects the font-face for display text. |
weight | "medium" | "light" | "bold" | TypographyWeight | "100" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900" | "thin" | "normal" | "extrabold" | "black" | TypographyWeight.Normal | No | How heavy should the text be? |