Link

The Link component styles anchor tags with default blue styling and hover text decoration. Link is used for destinations, or moving from one page to another.

In special cases where you'd like a <button> styled like a Link, use <Link is='button'>. Make sure to provide a click handler with onClick. For additional <button> flavors, checkout the Button component.

Default example

Default LinkLink w/underlineLink w/underline
<Flex
    my='3'
    justifyContent='space-evenly'
    alignItems='center'
>
    <Link mb={1} href="https://github.com">Default Link</Link>
    <Link mb={1} href="https://github.com" underline>Link w/underline</Link>
    <Link mb={1} href="https://github.com" onClick={e => {e.preventDefault(); alert(`Hey ma', I'm a regular-link!`)}}>Link w/underline</Link>
</Flex>

Link as a button element example

<Flex
    my='3'
    justifyContent='space-evenly'
    alignItems='center'
>
    <Link is='button' mb={1} mx={1} href="https://github.com" link>Link as a button</Link>
    <Link is='button' mb={1} mx={1} href="https://github.com" link underline>Link as a button w/underline</Link>
    <Link is='button' mb={1} mx={1} href="https://github.com" link onClick={e => {e.preventDefault(); alert(`Hey ma', I'm a button-link!`)}}>Link as a button w/onClick</Link>
</Flex>

Outline examples

Link w/Black OutlineLink w/Black Outline + Larger RadiusLink w/Black + Round Radius
Gray Outline + Round RadiusGreen Outline + Round RadiusPurple Outline + Round RadiusRed Outline + Round Radius
<Flex
    my='3'
    flexWrap='wrap'
    justifyContent='space-evenly'
    alignItems='center'
>
    <Link m={1} py={2} px={3} textStyle='caps' fontSize={0} href="https://github.com" outline='black'>Link w/Black Outline</Link>
    <Link m={1} py={2} px={3} textStyle='caps' radius={4} fontSize={0} href="https://github.com" outline='black'>Link w/Black Outline + Larger Radius</Link>
    <Link m={1} py={2} px={3} textStyle='caps' radius={6} fontSize={0} href="https://github.com" outline='black'>Link w/Black + Round Radius</Link>
</Flex>
<Flex
    my='3'
    flexWrap='wrap'
    justifyContent='space-evenly'
    alignItems='center'
>
    <Link m={1} py={2} px={3} textStyle='caps' radius={7} fontSize={0} href="https://github.com" outline='gray'>Gray Outline + Round Radius</Link>
    <Link m={1} py={2} px={3} textStyle='caps' radius={7} fontSize={0} href="https://github.com" outline='green'>Green Outline + Round Radius</Link>
    <Link m={1} py={2} px={3} textStyle='caps' radius={7} fontSize={0} href="https://github.com" outline='purple'>Purple Outline + Round Radius</Link>
    <Link m={1} py={2} px={3} textStyle='caps' radius={7} fontSize={0} href="https://github.com" outline='red'>Red Outline + Round Radius</Link>
</Flex>

Button-filled example

Default Button FillBlack Button FillCharcoal Button FillGreen Button FillPurple Button FillRed Button FillPrimary Button FillDanger Button Fill
<Flex
    my='3'
    flexWrap='wrap'
    justifyContent='space-evenly'
    alignItems='center'
>
    <Link m={1} py={2} px={3} textStyle='caps' radius={7} fontSize={0} href="https://github.com" btn>Default Button Fill</Link>
    <Link m={1} py={2} px={3} textStyle='caps' radius={7} fontSize={0} href="https://github.com" btn variant='black'>Black Button Fill</Link>
    <Link m={1} py={2} px={3} textStyle='caps' radius={7} fontSize={0} href="https://github.com" btn variant='charcoal'>Charcoal Button Fill</Link>
    <Link m={1} py={2} px={3} textStyle='caps' radius={7} fontSize={0} href="https://github.com" btn variant='green'>Green Button Fill</Link>
    <Link m={1} py={2} px={3} textStyle='caps' radius={7} fontSize={0} href="https://github.com" btn variant='purple'>Purple Button Fill</Link>
    <Link m={1} py={2} px={3} textStyle='caps' radius={7} fontSize={0} href="https://github.com" btn variant='red'>Red Button Fill</Link>
    <Link m={1} py={2} px={3} textStyle='caps' radius={7} fontSize={0} href="https://github.com" btn variant='primary'>Primary Button Fill</Link>
    <Link m={1} py={2} px={3} textStyle='caps' radius={7} fontSize={0} href="https://github.com" btn variant='danger'>Danger Button Fill</Link>
</Flex>

Full-width (block) example

Default Button FillBlack Button FillCharcoal Button FillGreen Button FillPurple Button FillRed Button FillPrimary Button FillDanger Button Fill
<Flex
    my='3'
    flexWrap='wrap'
    justifyContent='space-evenly'
    alignItems='center'
>
    <Link m={1} py={2} px={3} textStyle='caps' radius={7} fontSize={0} href="https://github.com" btn block>Default Button Fill</Link>
    <Link m={1} py={2} px={3} textStyle='caps' radius={7} fontSize={0} href="https://github.com" btn variant='black' block>Black Button Fill</Link>
    <Link m={1} py={2} px={3} textStyle='caps' radius={7} fontSize={0} href="https://github.com" btn variant='charcoal' block>Charcoal Button Fill</Link>
    <Link m={1} py={2} px={3} textStyle='caps' radius={7} fontSize={0} href="https://github.com" btn variant='green' block>Green Button Fill</Link>
    <Link m={1} py={2} px={3} textStyle='caps' radius={7} fontSize={0} href="https://github.com" btn variant='purple' block>Purple Button Fill</Link>
    <Link m={1} py={2} px={3} textStyle='caps' radius={7} fontSize={0} href="https://github.com" btn variant='red' block>Red Button Fill</Link>
    <Link m={1} py={2} px={3} textStyle='caps' radius={7} fontSize={0} href="https://github.com" btn variant='primary' block>Primary Button Fill</Link>
    <Link m={1} py={2} px={3} textStyle='caps' radius={7} fontSize={0} href="https://github.com" btn variant='danger' block>Danger Button Fill</Link>
</Flex>

System props

Link components get BORDER, COMMON, TYPOGRAPHY and VARIANT-related system props. Read the System Props doc page for a full list of available props.

Component props

NameTypeDefaultDescription
hrefStringURL to be used for the Link
underlineBooleanfalseAdds underline to the Link
isString'a'Can be 'a', 'button', 'input', or 'summary'
btnBooleanfalseused to make a link-element (a) look like a button. Used in conjunction with variant
borderString / NumberNo border for links with default variant
fontSizeString / Number'inherit'Set specific font-size
outlineBoolean / StringGive a link an outline look-n-feel. Passing outline as a boolean will fallback to default, otherwise, choose from: black, gray, green, purple, red
textStyleStringOverride link's base text-style look. Choose from: caps, small, medium, large, xlarge
underlineBooleanGive a link an initial underline for the text-decoration css-property
variantStringGive a link a button-filled look-n-feel. Use in parallel with the btn prop. Choose from: default, black, charcoal, danger, disabled, gray, green, primary, purple, red