# Arrow

Arrow component for sliders and navigation.

# Most common usage scenario

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

# Props

None.

# Slots

  • default
    • Use this slot to replace arrow icon

# Events

None.

# CSS modifiers

  • .sf-arrow--long
  • .sf-arrow--transparent
  • .sf-arrow--rounded
  • .sf-arrow--no-shadow
  • .sf-arrow--right
  • .sf-arrow--top
  • .sf-arrow--down

# CSS custom properties (variables)

  • --arrow-justify-content
  • --arrow-icon-transform

# Overridden other components CSS variables

  • --button-width
  • --button-height
  • --button-padding
  • --button-background
  • --button-transition
  • --icon-width
  • --icon-height
  • --icon-color
  • --button-box-shadow
  • --box-shadow-transition-opacity-duration
  • --button-box-shadow-opacity
  • --button-border-radius

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.