<template>
    <div>
        <div>
    <a-badge count="5">
      <a href="#" class="head-example" />
    </a-badge>
    <br/>
    <a-badge count="0" show-zero>
      <a href="#" class="head-example" />
    </a-badge>
    <br/>
    <a-badge>
      <a-icon slot="count" type="clock-circle" style="color: #f5222d" />
      <a href="#" class="head-example" />
    </a-badge>
  </div>
    <br/>
    <div>
    <a-badge status="success" />
    <a-badge status="error" />
    <a-badge status="default" />
    <a-badge status="processing" />
    <a-badge status="warning" />
    <br />
    <a-badge status="success" text="Success" />
    <br />
    <a-badge status="error" text="Error" />
    <br />
    <a-badge status="default" text="Default" />
    <br />
    <a-badge status="processing" text="Processing" />
    <br />
    <a-badge status="warning" text="warning" />
  </div>
  <br/>
  <div>
    <a-badge count="25" />
    <a-badge
      count="4"
      :number-style="{
        backgroundColor: '#fff',
        color: '#999',
        boxShadow: '0 0 0 1px #d9d9d9 inset',
      }"
    />
    <a-badge count="109" :number-style="{ backgroundColor: '#52c41a' }" />
  </div>
    </div>
</template>

<script>
export default {

}
</script>

<style>
</style>