Skip to content
Telescope
Components

Link

Text that navigates the user from one webpage to another.

Basic usage

First, import the component.

import {Link} from '@pleo-io/telescope'

Then use it, like so:

API reference

Information:

Use the forwardedAs prop instead of the as prop if using styled-components to add styles to your Link.

The component accepts the following props.

PropTypeDefault
as
any
children
React.ReactNode
forwardedAs
any
IconLeft
React.FC<{ size?: any; }>
IconRight
React.FC<{ size?: any; }>
inherit
boolean
replace
boolean
skeleton
boolean
false
state
any
to
enum

Examples

Match font size

The Link can be set to match, or "inherit", the font size of the text it's part of.

With an icon

An icon can be added to the left or right of the Link text to support its meaning.

Usage with Routing Library

The component can be used with a routing library such as react-router.

import {Link as RouterLink} from 'react-router-dom'
import {Link} from '@pleo-io/telescope'

export default () => (
    <Link as={RouterLink} to="/expenses">
        Go to expenses
    </Link>
)

Usage with styled-components

If you add custom styles to the Link component using styled-components (i.e. styled(Link) or css={{}}), use the forwardedAs prop instead of the as prop. Otherwise, the Link styles from Telescope will not be applied to your component.

import {RouterLink} from 'react-router'

const StyledLink = styled(Link)`
    margin-left: $tokens.spacing12;
`

export default () => (
    <StyledLink forwardedAs={RouterLink} to="/expenses">
        Go to expenses
    </StyledLink>
)

import {RouterLink} from 'react-router'

export default () => (
    <Link
        css={{margin-left: $tokens.spacing12}}
        forwardedAs={RouterLink}
        to="/expenses"
    >
        Go to expenses
    </Link>
)
On this page