# Color

Color picker component button

# Most common usage scenario

<template>
  <SfColor
    :color="color"
    :selected="selected"
    :has-badge="hasBadge"
    :aria-label="color"
    style="margin: 10px;"
    :class="customClass"
    @click="selected = !selected"
  />
</template>
<script>
import { SfColor } from "@storefront-ui/vue";
export default {
  components: {
    SfColor,
  },
  data() {
    return {
      selected: true,
      color: "red",
      hasBadge: true,
    };
  },
};
</script>

# Props

  • color

    • type: string
    • defaultValue: ""
  • selected

    • type: boolean
    • defaultValue: false
  • hasBadge

    • type: boolean
    • defaultValue: true

# Slots

  • badge
    • Use it to replace badge to custom element
    • bindings: selected, hasBadge

# Events

None.

# CSS modifiers

  • .sf-color--rounded

# CSS custom properties (variables)

  • --color-width
  • --color-height
  • --color-background
  • --color-border-radius
  • --color-box-shadow-transition
  • --color-box-shadow-opacity
  • --color-box-shadow

# Overridden other components CSS variables

  • --color-box-shadow-transition-duration
  • --badge-padding
  • --badge-border-radius
  • --color-size

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.