Button

View source code

Edit this page

Renders a button


<Button
    color="Secondary"
    backgroundColor="Primary"
    paddingX={3}
    paddingY={2}
    borderWidth="4px"
    borderRadius="4px"
>
    Button
</Button><Button
    color="Secondary"
    backgroundColor="Primary"
    paddingX={3}
    paddingY={2}
    borderWidth="4px"
    borderRadius="4px"
>
    Button
</Button>
Live Demo

`invisible`

Styles the button to be transparent and borderless. This allows easily composing semantic clickable elements.


<Button
    invisible
    onClick={() => alert('Hello world')}
>
    <Heading>
        Hello world
    </Heading>
    <Text>
        Lorem ipsum dolor sit amet
    </Text>
</Button><Button
    invisible
    onClick={() => alert('Hello world')}
>
    <Heading>
        Hello world
    </Heading>
    <Text>
        Lorem ipsum dolor sit amet
    </Text>
</Button>
Live Demo

Button

`invisible`

Hello world

← Heading

Link →