ButtonSelector

A selector for product options rendered as a set of buttons. Buttons can either have text or an image. The text for the selected option can optionally be displayed below the buttons.

This component supports AMP.

Import
import ButtonSelector from 'react-storefront/ButtonSelector'

Props

NameTypeDefaultDescription
modelcustom

The instance of SelectionModelBase to bind to

onSelectionChangefunc

Callback function for tab change Args: event, selectedItem, index

classesobjectOf

Overridable classes object to allow customization of component

imagePropsobject{}

Props for displayed images. See <Image /> component for details

buttonPropsobject{}

Props for button. See <Button /> component for details

showSelectedTextboolfalse

Set to true to show the name of the selected option in a caption below the buttons

namestring

The name of property in amp state to bind to

strikeThroughDisabledboolfalse

Set to true to show a slash through the item when disabled. Defaults to false

strikeThroughAnglenumber45

The angle in degress for the disabled indicator. Defaults to 45.

items[]

CSS API

You can override all the class names injected by Moov-PWA thanks to the classes property. This property accepts the following keys:

  • buttons
  • button
  • buttonWithImage
  • selectedImage
  • selected
  • imageLabel
  • image
  • disabled
  • selectedName
  • strikeThrough