HomeStarbucks Pattern Library

SegmentedControl

Notes

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

Props

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

    Controls the visual style of the component

  • inputs
    arrayOf [
    shape {
    displayNamestring*

    The displayed text of the input

    valuestring*

    The value of the input

    iconPathstring

    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