HomeStarbucks Pattern Library



A pre-styled control that allows for multiple values in a tabbable-fashion (one selected at a time)


  • visualStyleoneOf('default', 'dark', 'inverted')['default']

    Controls the visual style of the component

  • inputs
    arrayOf [
    shape {

    The displayed text of the input


    The value of the input


    The path of the icon to be used


    The inputs fields passed to the SegmentedControl. The number of inputs (objects) in the array determines the number of options shown within the SegmentedControl component.

  • onValueChangefunc*

    A function called when the selected value of the the SegmentedControl changes (when an individual control is clicked). This function receives the value defined in the inputs prop

  • selectedValuestring

    The currently selected value--the selected value will be highlighted

  • classNamestring

    The classes applied to the container component