Button

An accessible action button.

Usage

A simple button
import { Button } from 'smooth-doc/components'

render(<Button>A simple button</Button>)
import { Button } from 'smooth-doc/components'
render(<Button>A simple button</Button>)

Variants

Use variant property to define button variant. Four variants are available: "primary", "success", "danger" and "neutral". The default variant is "primary".

Primary
Success
Danger
Neutral
import { Box } from '@xstyled/styled-components'
import { Button } from 'smooth-doc/components'

render(
  <Box row m={-2}>
    <Box col="auto" p={2}>
      <Button variant="primary">Primary</Button>
    </Box>
    <Box col="auto" p={2}>
      <Button variant="success">Success</Button>
    </Box>
    <Box col="auto" p={2}>
      <Button variant="danger">Danger</Button>
    </Box>
    <Box col="auto" p={2}>
      <Button variant="neutral">Neutral</Button>
    </Box>
  </Box>,
)
import { Box } from '@xstyled/styled-components'
import { Button } from 'smooth-doc/components'
render(
  <Box row m={-2}>
    <Box col="auto" p={2}>
      <Button variant="primary">Primary</Button>
    </Box>
    <Box col="auto" p={2}>
      <Button variant="success">Success</Button>
    </Box>
    <Box col="auto" p={2}>
      <Button variant="danger">Danger</Button>
    </Box>
    <Box col="auto" p={2}>
      <Button variant="neutral">Neutral</Button>
    </Box>
  </Box>,
)

Disabled

Set disabled attribute to display button as disabled.

Disabled button
import { Button } from 'smooth-doc/components'

render(<Button disabled>Disabled button</Button>)
import { Button } from 'smooth-doc/components'
render(<Button disabled>Disabled button</Button>)

Link as Button

It is common to have to display a button that actually behaves like a link. The forwardedAs prop replaces the intrinsic component of the button.

Getting Started
import { Link } from 'gatsby'
import { Button } from 'smooth-doc/components'

render(
  <Button forwardedAs={Link} to="/docs/getting-started/">
    Getting Started
  </Button>,
)
import { Link } from 'gatsby'
import { Button } from 'smooth-doc/components'
render(
  <Button forwardedAs={Link} to="/docs/getting-started/">
    Getting Started
  </Button>,
)