HomeStarbucks Pattern Library

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

  • classNamestring
  • childrennode
  • coloroneOf('gold', 'black', 'white', 'houseGreen')
  • hrefstring

    The href of the link

  • loadingbool

    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.

  • visualStyleoneOf('default', 'positive', 'textLink', 'textOnly')

    The visual style of the button.

  • tagNameany

    An optional HTML tagname or React component for the rendered element. This should generally be button or a, unless there's a good reason to make it a non-interactive element. Defaults to button, or a if an href is present.

  • typeoneOf('button', 'reset', 'submit')

    An HTML button type attribute. Only applied if the tagName is button or input.

  • interactivebool

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>
<Button
className='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>
<Button
className='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'>
<Button
className="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>

ButtonKit

Notes

Provides a container for up to 2 buttons, implemented primarily for a Confirm/Cancel button model.

Props

  • confirmTextnode

    Provides display text for and enables the primary button. (right-most button when two buttons are used)

  • onConfirmfunc

    If given, provides the onClick action for the primary button. Takes precedence over the confirmHref prop, if both are given.

  • confirmHrefstring

    An alternate to the onConfirm action. If given, provides a link to a location for a primary button click. If onConfirm prop is also given, it will take precedence over the given href.

  • confirmPropsobject

    Optional primary button props

  • cancelTextnode

    Provides display text for and enables the secondary button. (left-most when two buttons are used)

  • onCancelfunc

    If given, provides the onClick action for the secondary button. Takes precedence over the cancelHref prop, if both are given.

  • cancelHrefstring

    An alternate to the onCancel action. If given, provides a link to a location for a secondary button click. If onCancel prop is also given, it will take precedence over the given href.

  • cancelPropsobject

    Optional secondary button props

  • classNamestring['']

    Augments the default button container className.

Example: Both Confirm and Cancel Buttons

<ButtonKit
confirmText='Confirm'
onConfirm={() => { alert('Confirmed!'); }}
cancelText='Cancel'
cancelHref='/style-utilities/styles-index/'
onCancel={() => { alert('Canceled!'); }}
/>

Example: Confirm Button Only

<ButtonKit
confirmText='Confirm'
onConfirm={() => { alert('Confirmed!'); }}
cancelText={null}
onCancel={() => { alert('SHOULD NOT DISPLAY BUTTON!'); }}
/>

Example: Cancel Button Only (with an optional cancel prop)

<ButtonKit
cancelText='Cancel'
onCancel={() => { alert('Canceled!'); }}
cancelProps={{color:'gold'}}
confirmText=''
onConfirm={() => { alert('SHOULD NOT DISPLAY BUTTON'); }}
/>

Example: Confirm Button with TextOnly Cancel Button

<ButtonKit
confirmText='Continue'
onConfirm={() => { alert('Continuing!'); }}
cancelText='Done'
cancelHref='/guidelines/color/'
/>

Example: Both Buttons with Lengthy Text (as if French)

<ButtonKit
confirmText='Continue your quest for the Iron Throne'
onConfirm={() => { alert('You are Protector of the Realm!'); }}
cancelText='Cancel to escape needless suffering'
onCancel={() => { alert('Safely back to Braavos!'); }}
/>

Example: Both Buttons with Customizations

<ButtonKit
confirmText='Continue your quest for the Iron Throne'
onConfirm={() => { alert('You are Protector of the Realm!'); }}
className='py7 justify-center flex-wrap'
cancelText='Cancel to escape needless suffering'
onCancel={() => { alert('Safely back to Braavos!'); }}
cancelProps={{visualStyle: 'default'}}
/>