# CircleIcon

Round hover-animated component with an icon, e.g. usable for major navigation/action items.

# Most common usage scenario

<template>
  <SfCircleIcon
    :class="customClass"
    :icon="icon"
    :has-badge="hasBadge"
    :badge-label="badgeLabel"
    aria-label="Go to Home"
    :disabled="disabled"
    :style="{ margin: '.5rem' }"
  />
</template>
<script>
import { SfCircleIcon } from "@storefront-ui/vue";
export default {
  components: {
    SfCircleIcon,
  },
  data() {
    return {
      icon: "home",
      hasBadge: false,
      badgeLabel: "99",
      disabled: false,
    };
  },
};
</script>

# Props

  • icon

    • type: string|array
    • defaultValue: "home"
  • iconColor

    • type: string
    • defaultValue: ""
  • iconSize

    • type: string
    • defaultValue: ""
  • disabled

    • type: boolean
    • defaultValue: false
  • hasBadge

    • type: boolean
    • defaultValue: false
  • badgeLabel

    • type: string
    • defaultValue: ""

# Slots

  • default
    • Custom content that will replace default icon. can be used for inlined SVG's

# Events

None.

# CSS modifiers

  • .sf-circle-icon--small

# CSS custom properties (variables)

  • --circle-icon-position

# Overridden other components CSS variables

  • --icon-color
  • --button-padding
  • --icon-size
  • --button-size
  • --button-background
  • --button-transition
  • --button-box-shadow
  • --button-border-radius
  • --icon-position

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.