# ProductOption

Component with label used as part of product description.

# Most common usage scenario

<template>
  <div style="max-width: 300px;">
    <SfProductOption :color="color" :label="label" />
  </div>
</template>
<script>
import { SfProductOption } from "@storefront-ui/vue";
export default {
  components: {
    SfProductOption,
  },
  data() {
    return {
      color: "red",
      label: "Red",
    };
  },
};
</script>

# Props

  • label

    • type: string
    • defaultValue: ""
  • color

    • type: string
    • defaultValue: ""

# Slots

  • color

    • bindings: color
  • label

    • bindings: label

# Events

None.

# CSS modifiers

None.

# CSS custom properties (variables)

  • --product-option-font
  • --product-option-font-weight
  • --product-option-font-size
  • --product-option-font-line-height
  • --product-option-font-family
  • --product-option-size
  • --product-option-color-margin
  • --product-option-border
  • --product-option-border-width
  • --product-option-border-radius

# Overridden other components CSS variables

None.

You can override CSS variables values bound to this component.

# Play with this component

See all available configurations and play with this component on Storybook.