# Badge

Badge component. Place desired content into its default slot.

# Most common usage scenario

<template>
  <SfBadge :class="customClass">
    {{ customLabel }}
  </SfBadge>
</template>
<script>
import { SfBadge } from "@storefront-ui/vue";
export default {
  components: {
    SfBadge,
  },
  data() {
    return {
      default: "Limited",
    };
  },
};
</script>

# Props

None.

# Slots

  • default
    • Use this slot to place content inside the badge

# Events

None.

# CSS modifiers

  • .sf-badge--full-width
  • .sf-badge--number

# CSS custom properties (variables)

  • --badge-width
  • --badge-min-width
  • --badge-height
  • --badge-min-height
  • --badge-padding
  • --badge-background
  • --badge-border
  • --badge-border-radius
  • --badge-color
  • --badge-text-align
  • --badge-font
  • --badge-font-weight
  • --badge-font-size
  • --badge-font-line-height
  • --badge-font-family
  • --badge-line-height

# Overridden other components CSS variables

None.

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.