Button
Notes
This component renders button
tags by default or a
if href
is
provided. It also supports an arbitrary tagName
prop for advanced usage, which can
support HTML tag names or React components like Link
.
Props
- className
string
- children
node
- color
oneOf('gold', 'black', 'white', 'houseGreen')
- href
string
The href of the link
- loading
bool
If true, it shows a loading animation inside the button. Not shown if it's a text-only or text link button or if the button is disabled.
- visualStyle
oneOf('default', 'positive', 'textLink', 'textOnly')
The visual style of the button.
- tagName
any
An optional HTML tagname or React component for the rendered element. This should generally be
button
ora
, unless there's a good reason to make it a non-interactive element. Defaults tobutton
, ora
if anhref
is present. - type
oneOf('button', 'reset', 'submit')
An HTML button
type
attribute. Only applied if thetagName
isbutton
orinput
. - interactive
bool
Example: Default Buttons
const ButtonExample = () => {const [showLoading, setShowLoading] = React.useState(false);const toggleLoading = () => {setShowLoading(!showLoading);};return(<div className='relative'><div className="p3"><Button className='mr3' loading={showLoading}>Espresso</Button><Button className='mr3' color='black' loading={showLoading}>Doppio</Button><Button className='mr3' color='houseGreen' loading={showLoading}>Triple</Button></div><div className="p3 bg-houseGreen"><Button color='gold' className='mr3' loading={showLoading}>Quad</Button><Button color='white' className='mr3' loading={showLoading}>Ristretto</Button></div><ButtonclassName='absolute'onClick={toggleLoading}style={{ right: 0, top: 0 }}>{ `${showLoading ? 'Hide' : 'Show'} loading state` }</Button></div>);};render(<ButtonExample />);
Example: Filled (or Positive) Buttons
const ButtonExample = () => {const [showLoading, setShowLoading] = React.useState(false);const toggleLoading = () => {setShowLoading(!showLoading);};return(<div className='relative'><div className="p3"><Button visualStyle="positive" className='mr3' loading={showLoading}>Espresso</Button><Button visualStyle="positive" className='mr3' color='black' loading={showLoading}>Doppio</Button><Button visualStyle="positive" color='houseGreen' className='mr3' loading={showLoading}>Triple</Button></div><div className="p3 bg-houseGreen"><Button visualStyle="positive" color='gold' className='mr3' loading={showLoading}>Quad</Button><Button visualStyle="positive" color='white' className='mr3' loading={showLoading}>Ristretto</Button></div><ButtonclassName='absolute'onClick={toggleLoading}style={{ right: 0, top: 0 }}>{ `${showLoading ? 'Hide' : 'Show'} loading state` }</Button></div>);}render(<ButtonExample />);
Example: Text-only Buttons
<React.Fragment><div className="p3"><Button visualStyle='textOnly' className='mr3'>Espresso</Button><Button visualStyle='textOnly' className='mr3' color='black'>Doppio</Button><Button visualStyle='textOnly' className='mr3' color='houseGreen'>Triple</Button></div><div className="p3 bg-houseGreen"><Button visualStyle='textOnly' color='gold' className='mr3'>Quad</Button><Button visualStyle='textOnly' color='white' className='mr3'>Ristretto</Button></div></React.Fragment>
Example: Themed Buttons
const ThemedButtonExample = () => {const [showLoading, setShowLoading] = React.useState(false);const toggleLoading = () => {setShowLoading(!showLoading);};return (<React.Fragment><p className='pb3'>Buttons nested in ThemeContext.Provider components will change automatically. The markup for the buttons in each of the following examples is identical, only the Theme provider wrapping the buttons is different.</p><div className='text-right'><ButtonclassName="mr3"onClick={toggleLoading}style={{ right: 0, top: 0 }}>{ `${showLoading ? 'Hide' : 'Show'} loading state` }</Button></div><ThemeContext.Provider value={ themes.default }><div className='p3'><p className='pb2'>Default theme</p><Button loading={showLoading} className='mr3'>Espresso</Button><Button loading={showLoading} className='mr3' visualStyle='positive'>Doppio</Button><Button className='mr3' visualStyle='textOnly'>Ristretto</Button></div></ThemeContext.Provider><ThemeContext.Provider value={ themes.dark }><div className='bg-houseGreen p3'><p className="pb2 color-textWhite">Dark theme</p><Button loading={showLoading} className='mr3'>Espresso</Button><Button loading={showLoading} className='mr3' visualStyle='positive'>Doppio</Button><Button className='mr3' visualStyle='textOnly'>Ristretto</Button></div></ThemeContext.Provider><ThemeContext.Provider value={ themes.rewards }><div className='p3'><p className='pb2'>Rewards theme</p><Button loading={showLoading} className='mr3'>Espresso</Button><Button loading={showLoading} className='mr3' visualStyle='positive'>Doppio</Button><Button className='mr3' visualStyle='textOnly'>Ristretto</Button></div></ThemeContext.Provider></React.Fragment>);};render(<ThemedButtonExample />);
Example: Text link Buttons
<div><p className='mb3'>The textLink visual style makes the buttons look like text links</p><div className='mb3'><Button visualStyle='textLink'>Make a double shot espresso</Button></div><div><Button visualStyle='textLink'>Make a triple shot decaf espresso</Button></div></div>