Badge

Demos

Text badge

Badge content can be text.

New
New
New
New
New

Use the type prop to apply different contextual styles.

Edit this page on GitHubEdit
<template>
<article>
  <veui-badge
    value="New"
    type="success"
  >
    <veui-button>View</veui-button>
  </veui-badge>
  <veui-badge
    value="New"
    type="info"
  >
    <veui-button>View</veui-button>
  </veui-badge>
  <veui-badge value="New">
    <veui-button>View</veui-button>
  </veui-badge>
  <veui-badge
    value="New"
    type="warning"
  >
    <veui-button>View</veui-button>
  </veui-badge>
  <veui-badge
    value="New"
    type="aux"
  >
    <veui-button>View</veui-button>
  </veui-badge>
</article>
</template>

<script>
import { Badge, Button } from 'veui'

export default {
  components: {
    'veui-badge': Badge,
    'veui-button': Button
  }
}
</script>

<style lang="less" scoped>
.veui-badge {
  & + & {
    margin-left: 2em;
  }
}
</style>

Numeric badge

The content can also be a number and can be can be displayed as “max+” when exceeding the maximum value.

96

Use the max prop to specify the max value can be displayed. Displays “max+” when value is larger than max.

Edit this page on GitHubEdit
<template>
<article>
  <veui-badge
    :value="count"
    :max="100"
  >
    <veui-button
      ui="primary"
      @click="inc"
    >
      Add
    </veui-button>
  </veui-badge>
  <veui-button
    ui="s"
    @click="reset"
  >
    Reset
  </veui-button>
</article>
</template>

<script>
import { Badge, Button } from 'veui'

const initial = 96

export default {
  components: {
    'veui-badge': Badge,
    'veui-button': Button
  },
  data () {
    return {
      count: initial
    }
  },
  methods: {
    inc () {
      this.count++
    },
    reset () {
      this.count = initial
    }
  }
}
</script>

<style lang="less" scoped>
.veui-badge {
  margin-right: 2em;
}
</style>

Corner badge

When no badge content is provided, the badge will be displayed in the upper right corner in a dot style.

Running
New
Rejected
Auditing
Expired
Edit this page on GitHubEdit
<template>
<article>
  <section>
    <veui-badge type="success">
      Running
    </veui-badge>
    <veui-badge type="info">
      New
    </veui-badge>
    <veui-badge>
      Rejected
    </veui-badge>
    <veui-badge type="warning">
      Auditing
    </veui-badge>
    <veui-badge type="aux">
      Expired
    </veui-badge>
  </section>
</article>
</template>

<script>
import { Badge } from 'veui'

export default {
  components: {
    'veui-badge': Badge
  }
}
</script>

<style lang="less" scoped>
section {
  margin-bottom: 1em;
}

.veui-badge {
  & + & {
    margin-left: 30px;
  }
}
</style>

Dot badge

When no slot content is provided, the badge will be displayed in a dot style.

Running
New
Rejected
Auditing
Expired
Edit this page on GitHubEdit
<template>
<article>
  <section>
    <veui-badge
      value="Running"
      type="success"
    />
    <veui-badge
      value="New"
      type="info"
    />
    <veui-badge value="Rejected"/>
    <veui-badge
      value="Auditing"
      type="warning"
    />
    <veui-badge
      value="Expired"
      type="aux"
    />
  </section>
</article>
</template>

<script>
import { Badge } from 'veui'

export default {
  components: {
    'veui-badge': Badge
  }
}
</script>

<style lang="less" scoped>
section {
  margin-bottom: 1em;
}

.veui-badge {
  & + & {
    margin-left: 30px;
  }
}
</style>

API

Props

NameTypeDefaultDescription
typestring='error'

The status type of the badge. The optional values for built-in styles are as follows. When using other values, you need to define the styles for .veui-badge-{type}.

ValueDescription
infoInfo style.
successSuccess style.
warningWarning style.
errorError style.
auxAux style.
valuestring | number-The badge content value. When it is of type number, it is limited by the max prop. max is ignored when it is of type string.
maxnumber=badge.maxThe maximum value of the badge, when value exceeds this value, the badge content will be displayed as “max+”. Ignored when value is string.
hiddenboolean=falseWhether the badge is hidden.

Slots

NameDescription
defaultThe target content that the badge needs to display upon.
Edit this page on GitHubEdit