# Arrow

Arrow component for sliders and navigation.

# Most common usage scenario


<template>
  <SfArrow />
</template>

<script>
import { SfArrow } 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--right
  • .sf-arrow--rounded
  • .sf-arrow--transparent
  • .sf-arrow--no-shadow

# SCSS variables

$arrow__button-color: $c-light-primary !default;
$arrow__button-color--hover: $c-dark-primary !default;
$arrow__button-shadow: 0 5px 12px -6px rgba($c-dark-primary, 0) !default;
$arrow__button-shadow--right: 0 -5px 12px -5px rgba($c-dark-primary, 0.6) !default;
$arrow__icon-color: $c-white !default;
$arrow__icon-color--hover: $c-dark-primary !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/SfArrow/SfArrow.html"></template>
<script src="@storefront-ui/vue/src/components/atoms/SfArrow/SfArrow.js"></script>
<style lang="scss">
@import "~@storefront-ui/shared/styles/components/SfArrow.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.