An accessible action button.
A simple button
import { Button } from 'smooth-doc/components'
render ( < Button > A simple button < / Button > )
Use variant property to define button variant. Four variants are available: "primary", "success", "danger" and "neutral". The default variant is "primary".
import { x . div } from '@xstyled/styled-components'
import { Button } from 'smooth-doc/components'
render (
< x . div row m = { - 2 } >
< x . div col = "auto" p = { 2 } >
< Button variant = "primary" > Primary < / Button >
< / x . div >
< x . div col = "auto" p = { 2 } >
< Button variant = "success" > Success < / Button >
< / x . div >
< x . div col = "auto" p = { 2 } >
< Button variant = "danger" > Danger < / Button >
< / x . div >
< x . div col = "auto" p = { 2 } >
< Button variant = "neutral" > Neutral < / Button >
< / x . div >
< / x . div > ,
)
SyntaxError: Unexpected token (1:24)
1 : /* @jsx mdx */ const { x.div } = require('@xstyled/styled-components');
^ Set disabled attribute to display button as disabled.
Disabled button
import { Button } from 'smooth-doc/components'
render ( < Button disabled > Disabled button < / Button > )
It is common to have to display a button that actually behaves like a link. The as prop replaces the intrinsic component of the button.
import { Link } from 'gatsby'
import { Button } from 'smooth-doc/components'
render (
< Button as = { Link } to = "/docs/getting-started/" >
Getting Started
< / Button > ,
)
← Article Feature → 