Starbucks React 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. Buttons must always use sentence case (no ALL CAPS or Title Case) and we enforce this in CSS via text-transform property.

Props

classNamestring
childrennode
coloroneOf('gold', 'black', 'white', 'houseGreen')
elementReffunc
A function to access the Button DOM node's ref. See https://facebook.github.io/react/docs/refs-and-the-dom.html#exposing-dom-refs-to-parent-components for details.
hrefstring
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')['default']
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')['button']
An HTML button type attribute. Only applied if the tagName is button or input.
interactivebool[true]

Default Buttons

class ButtonExample extends React.Component {
  constructor() {
    this.state = { showLoading: false };
  }

  toggleLoading() {
    this.setState({ showLoading: !this.state.showLoading });
  }


  render() {
    return(
      <div className='relative'>
        <div className="p3">
          <Button className='mr3' loading={this.state.showLoading}>Espresso</Button>
          <Button className='mr3' color='black' loading={this.state.showLoading}>Doppio</Button>
          <Button className='mr3' color='houseGreen' loading={this.state.showLoading}>Triple</Button>
        </div>
        <div className="p3 bg-blackWarm">
          <Button color='gold' className='mr3' loading={this.state.showLoading}>Quad</Button>
          <Button color='white' className='mr3' loading={this.state.showLoading}>Ristretto</Button>
        </div>

        <Button
            className='absolute'
            onClick={ () => this.toggleLoading() }
            style={{ right: 0, top: 0 }}>
            { `${this.state.showLoading ? 'Hide' : 'Show'} loading state` }
        </Button>
      </div>
    );
  }
}

render(<ButtonExample />);

class ButtonExample extends React.Component {
  constructor() {
    this.state = { showLoading: false };
  }
  toggleLoading() {
    this.setState({ showLoading: !this.state.showLoading });
  }
  render() {
    return(
      <div className='relative'>
        <div className="p3">
          <Button className='mr3' loading={this.state.showLoading}>Espresso</Button>
          <Button className='mr3' color='black' loading={this.state.showLoading}>Doppio</Button>
          <Button className='mr3' color='houseGreen' loading={this.state.showLoading}>Triple</Button>
        </div>
        <div className="p3 bg-blackWarm">
          <Button color='gold' className='mr3' loading={this.state.showLoading}>Quad</Button>
          <Button color='white' className='mr3' loading={this.state.showLoading}>Ristretto</Button>
        </div>
        <Button
            className='absolute'
            onClick={ () => this.toggleLoading() }
            style={{ right: 0, top: 0 }}>
            { `${this.state.showLoading ? 'Hide' : 'Show'} loading state` }
        </Button>
      </div>
    );
  }
}
render(<ButtonExample />);

Default Buttons

class ButtonExample extends React.Component {
  constructor() {
    this.state = { showLoading: false };
  }

  toggleLoading() {
    this.setState({ showLoading: !this.state.showLoading });
  }


  render() {
    return(
      <div className='relative'>
        <div className="p3">
          <Button visualStyle="positive" className='mr3' loading={this.state.showLoading}>Espresso</Button>
          <Button visualStyle="positive" className='mr3' color='black' loading={this.state.showLoading}>Doppio</Button>
          <Button visualStyle="positive" color='houseGreen' className='mr3' loading={this.state.showLoading}>Triple</Button>
        </div>
        <div className="p3 bg-blackWarm">
          <Button visualStyle="positive" color='gold' className='mr3' loading={this.state.showLoading}>Quad</Button>
          <Button visualStyle="positive" color='white' className='mr3' loading={this.state.showLoading}>Ristretto</Button>
        </div>

        <Button
            className='absolute'
            onClick={ () => this.toggleLoading() }
            style={{ right: 0, top: 0 }}>
            { `${this.state.showLoading ? 'Hide' : 'Show'} loading state` }
        </Button>
      </div>
    );
  }
}

render(<ButtonExample />);

class ButtonExample extends React.Component {
  constructor() {
    this.state = { showLoading: false };
  }
  toggleLoading() {
    this.setState({ showLoading: !this.state.showLoading });
  }
  render() {
    return(
      <div className='relative'>
        <div className="p3">
          <Button visualStyle="positive" className='mr3' loading={this.state.showLoading}>Espresso</Button>
          <Button visualStyle="positive" className='mr3' color='black' loading={this.state.showLoading}>Doppio</Button>
          <Button visualStyle="positive" color='houseGreen' className='mr3' loading={this.state.showLoading}>Triple</Button>
        </div>
        <div className="p3 bg-blackWarm">
          <Button visualStyle="positive" color='gold' className='mr3' loading={this.state.showLoading}>Quad</Button>
          <Button visualStyle="positive" color='white' className='mr3' loading={this.state.showLoading}>Ristretto</Button>
        </div>
        <Button
            className='absolute'
            onClick={ () => this.toggleLoading() }
            style={{ right: 0, top: 0 }}>
            { `${this.state.showLoading ? 'Hide' : 'Show'} loading state` }
        </Button>
      </div>
    );
  }
}
render(<ButtonExample />);

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-blackWarm">
    <Button visualStyle='textOnly' color='gold' className='mr3'>Quad</Button>
    <Button visualStyle='textOnly' color='white' className='mr3'>Ristretto</Button>
  </div>
</React.Fragment>

<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-blackWarm">
    <Button visualStyle='textOnly' color='gold' className='mr3'>Quad</Button>
    <Button visualStyle='textOnly' color='white' className='mr3'>Ristretto</Button>
  </div>
</React.Fragment>

Themed Buttons

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.

Default theme

Dark theme

Rewards theme

class ThemedButtonExample extends React.Component {
  constructor() {
    this.state = { showLoading: false };
  }

  toggleLoading() {
    this.setState({ showLoading: !this.state.showLoading });
  }

  render() {
    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={ () => this.toggleLoading() }
            style={{ right: 0, top: 0 }}>
              { `${this.state.showLoading ? 'Hide' : 'Show'} loading state` }
          </Button>
        </div>

        
        <ThemeContext.Provider value={ themes.default }>
          <div className='p3'>
            <p className='pb2'>Default theme</p>
            <Button loading={this.state.showLoading} className='mr3'>Espresso</Button>
            <Button loading={this.state.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-blackWarm p3'>
            <p className="pb2 color-textWhite">Dark theme</p>
            <Button loading={this.state.showLoading} className='mr3'>Espresso</Button>
            <Button loading={this.state.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={this.state.showLoading} className='mr3'>Espresso</Button>
            <Button loading={this.state.showLoading} className='mr3' visualStyle='positive'>Doppio</Button>
            <Button className='mr3' visualStyle='textOnly'>Ristretto</Button>
          </div>
        </ThemeContext.Provider>
      </React.Fragment>
    )
  }
}

render(<ThemedButtonExample />);

class ThemedButtonExample extends React.Component {
  constructor() {
    this.state = { showLoading: false };
  }
  toggleLoading() {
    this.setState({ showLoading: !this.state.showLoading });
  }
  render() {
    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={ () => this.toggleLoading() }
            style={{ right: 0, top: 0 }}>
              { `${this.state.showLoading ? 'Hide' : 'Show'} loading state` }
          </Button>
        </div>
        
        <ThemeContext.Provider value={ themes.default }>
          <div className='p3'>
            <p className='pb2'>Default theme</p>
            <Button loading={this.state.showLoading} className='mr3'>Espresso</Button>
            <Button loading={this.state.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-blackWarm p3'>
            <p className="pb2 color-textWhite">Dark theme</p>
            <Button loading={this.state.showLoading} className='mr3'>Espresso</Button>
            <Button loading={this.state.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={this.state.showLoading} className='mr3'>Espresso</Button>
            <Button loading={this.state.showLoading} className='mr3' visualStyle='positive'>Doppio</Button>
            <Button className='mr3' visualStyle='textOnly'>Ristretto</Button>
          </div>
        </ThemeContext.Provider>
      </React.Fragment>
    )
  }
}
render(<ThemedButtonExample />);

Text link Buttons

The textLink visual style makes the buttons look like text links

<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>

<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.

Both Confirm and Cancel Buttons

<ButtonKit
  confirmText='Confirm'
  onConfirm={() => { alert('Confirmed!'); }}

  cancelText='Cancel'
  cancelHref='/style-utilities/styles-index/'
  onCancel={() => { alert('Canceled!'); }}
/>

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

Confirm Button Only

<ButtonKit
  confirmText='Confirm'
  onConfirm={() => { alert('Confirmed!'); }}

  cancelText={null}
  onCancel={() => { alert('SHOULD NOT DISPLAY BUTTON!'); }}
/>

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

Cancel Button Only (with an optional cancel prop)

<ButtonKit
  cancelText='Cancel'
  onCancel={() => { alert('Canceled!'); }}
  cancelProps={{color:'gold'}}

  confirmText=''
  onConfirm={() => { alert('SHOULD NOT DISPLAY BUTTON'); }}
/>

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

Confirm Button with TextOnly Cancel Button

Done

<ButtonKit
  confirmText='Continue'
  onConfirm={() => { alert('Continuing!'); }}

  cancelText='Done'
  cancelHref='/guidelines/color/'
/>

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

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!'); }}
/>

<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!'); }}
/>

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'}}
/>

<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'}}
/>