Link is used to move to a different destination. It has the primary blue styling and text underline when hovered.

For tertiary buttons, or special cases, use the as prop: <Link as="button"> and add an onClick prop.

Example

Links font styling is inherited.

 Link 
<Link href="#">Link</Link>
<Link href="#">Link</Link>

Variants

There are three variants: primary, secondary, and white. These variants match the Primary Styles of Tertiary Buttons in our Design Guidelines.

 
Primary Style
Secondary Style (blue.darker hover color)
White Style
 
<Box p="24px">
    <Text as="p">
        <Link href="#" variant="primary">Primary Style</Link>
    </Text>
</Box>
<Box p="24px" bg="#FAFBFC">
    <Text as="p">
        <Link href="#" variant="secondary">Secondary Style (blue.darker hover color)</Link>
    </Text>
</Box>
<Box p="24px" bg="indigo.2">
     <Text as="p">
        <Link href="#" variant="white">White Style</Link>
    </Text>
</Box>
<Box p="24px">
    <Text as="p">
        <Link href="#" variant="primary">Primary Style</Link>
    </Text>
</Box>
<Box p="24px" bg="#FAFBFC">
    <Text as="p">
        <Link href="#" variant="secondary">Secondary Style (blue.darker hover color)</Link>
    </Text>
</Box>
<Box p="24px" bg="indigo.2">
     <Text as="p">
        <Link href="#" variant="white">White Style</Link>
    </Text>
</Box>

Common Props

Link includes COMMON and TYPOGRAPHY common props. Read Common Props for details and API. These common props will override component props such as the color.

Component Props