# Color

Color picker component button

# Most common usage scenario

<template>
  <div>
    <SfColor
      v-for="color in colors"
      :color="color.label"
      :selected="color.active"
      :aria-label="color.label"
      style="margin: 10px;"
      :class="customClass"
      @click="color.active = !color.active"
    />
  </div>
</template>

<script>
import { SfColor } from "@storefront-ui/vue";

export default {
  components: {
    SfColor
  },
  data() {
    return {
      colors: [
        { label: "red", active: false },
        { label: "black", active: false },
        { label: "purple", active: true },
        { label: "orange", active: false }
      ]
    };
  }
};
</script>

# Props

  • color

    • type: string
    • defaultValue: ""
  • selected

    • type: boolean
    • defaultValue: false

# Slots

  • default
    • Custom color markup

# Events

None.

# CSS modifiers

  • .sf-color--active
  • .sf-color--rounded

# SCSS variables

$color-size: 2.5rem !default;
$color-padding: 3px !default;

You can override SCSS variable values bound to this component in sfui.scss in the root of your project.

# Partials

If you want to customize this component even more you can use its partials for limitless customization.

<template lang="html" src="@storefront-ui/vue/src/components/atoms/SfColor/SfColor.html"></template>
<script src="@storefront-ui/vue/src/components/atoms/SfColor/SfColor.js"></script>
<style lang="scss">
@import "~@storefront-ui/shared/styles/components/SfColor.scss";
</style>

You can read about using component partials here

# Play with this component

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