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
<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
<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
<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
<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
Name | Type | Default | Description |
---|---|---|---|
href | String | URL to be used for the Link | |
underline | Boolean | false | Adds underline to the Link |
is | String | 'a' | Can be 'a', 'button', 'input', or 'summary' |
btn | Boolean | false | used to make a link-element (a ) look like a button. Used in conjunction with variant |
border | String / Number | No border for links with default variant | |
fontSize | String / Number | 'inherit' | Set specific font-size |
outline | Boolean / String | Give a link an outline look-n-feel. Passing outline as a boolean will fallback to default , otherwise, choose from: black , gray , green , purple , red | |
textStyle | String | Override link's base text-style look. Choose from: caps , small , medium , large , xlarge | |
underline | Boolean | Give a link an initial underline for the text-decoration css-property | |
variant | String | Give 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 |