Use variant property to define button variant. Four variants are available: "primary", "success", "danger" and "neutral". The default variant is "primary".
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.
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.