# Chevron

Chevron component

# Most common usage scenario

<template>
  <SfChevron :class="customClass" />
</template>
<script>
import { SfChevron } from "@storefront-ui/vue";
export default {
  components: {
    SfChevron,
  },
};
</script>

# Props

None.

# Slots

  • default
    • Custom chevron markup

# Events

None.

# CSS modifiers

  • .sf-chevron__bar--left
  • .sf-chevron__bar--right
  • .sf-chevron--top
  • .sf-chevron--left
  • .sf-chevron--right

# CSS custom properties (variables)

  • --chevron-position
  • --chevron-size
  • --chevron-background
  • --chevron-color
  • --chevron-translateX

# Overridden other components CSS variables

  • --chevron-rotate
  • --chevron-translateY

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.