Button

Basic usage

First, import the component.

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

Then use it, like so:

API reference

The component accepts the following props.

Examples

Render as a link

To use the button as an hyperlink, use the href prop. This will semantically render an <a>.

<Button href="https://pleo.io">Go home</Button>

With routing library

To use the button component with a routing Library like React Router, simply pass the Link from react-router as the as prop.

import {Link} from 'react-router'

export default () => (
    <Button as={Link} to="/home">
        Router link button
    </Button>
)

With styled-components

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

import {Link} from 'react-router'

const StyledButton = styled(Button)`
    margin-left: $tokens.spacing12;
`

export default () => (
    <StyledButton forwardedAs={Link} to="/expenses">
        Go to expenses
    </StyledButton>
)

import {Link} from 'react-router'

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

Naked button

We provide a NakedButton where all the styles of the button have been stripped away while the functionality, semantics and accessibility are still provided.

We often use icons in relation to interactive elements in the UI. Dropping an icon into a NakedButton will result in the following.