Buyer Signal

The BuyerSignal component displays information to a user.

Count

Use the count prop to pass in a number to display in your buyer signal element. If no number is passed in, it will show 0. If count is larger than 99, it will display 99+.

<template>
  <div>
    <ci-buyer-signal />
    <ci-buyer-signal :count="7" />
    <ci-buyer-signal :count="50" />
    <ci-buyer-signal :count="100" />
  </div>
</template>

Text

Use the default slot to pass text to your buyer signal element.

<template>
  <ci-buyer-signal :count="15">Email opens</ci-buyer-signal>
</template>

Variant

Use the variant prop to change the icon and color of your buyer signal element.

<template>
  <div>
    <ci-buyer-signal :count="1">
      Email opens
    </ci-buyer-signal>
    <ci-buyer-signal
      variant="replies"
      :count="50"
    >
      Email replies
    </ci-buyer-signal>
    <ci-buyer-signal
      variant="clicks"
      :count="100"
    >
      Link clicks
    </ci-buyer-signal>
    <ci-buyer-signal
      variant="visits"
      :count="25"
    >
      Web visits
    </ci-buyer-signal>
  </div>
</template>

Disabled

Use the disabled prop to disable the buyer signal and give it a disabled appearance.

<template>
  <div>
    <ci-buyer-signal
      variant="replies"
      :count="50"
      disabled
    >
      Email replies
    </ci-buyer-signal>
    <ci-buyer-signal
      variant="clicks"
      :count="100"
    >
      Link clicks
    </ci-buyer-signal>
    <ci-buyer-signal
      variant="visits"
      :count="25"
      disabled
    >
      Web visits
    </ci-buyer-signal>
  </div>
</template>

Loading

Use the loading prop to change buyer signal element loading state.

<template>
  <div>
    <ci-toggle 
      v-model="loading"
      label="Toggle loading state"
    />
    <br>
    <ci-buyer-signal 
      :count="1" 
      :loading="loading"
    >
      Email opens
    </ci-buyer-signal>
  </div>
</template>
<script>
export default {
  data() {
    return {
      loading: true
    }
  }
}
</script>

Events

Use the @click to do something when the buyer signal element is clicked.

<template>
  <div>
    <ci-buyer-signal @click="clicks += 1">
      Email opens
    </ci-buyer-signal>
    <br>
    Clicked {{ clicks }} time(s)
  </div>
</template>
<script>
export default {
  data() {
    return {
      clicks: 0
    };
  },
}
</script>