Badge

Examples

Text badge

The content of the badge can be plain text.

New

Use the status prop to apply different contextual status.

<template>
<article>
  <veui-badge
    class="badge"
    value="New"
    status="success"
  >
    <veui-button>View</veui-button>
  </veui-badge>
  <veui-badge
    class="badge"
    value="New"
    status="info"
  >
    <veui-button>View</veui-button>
  </veui-badge>
  <veui-badge
    class="badge"
    value="New"
  >
    <veui-button>View</veui-button>
  </veui-badge>
  <veui-badge
    class="badge"
    value="New"
    status="warning"
  >
    <veui-button>View</veui-button>
  </veui-badge>
  <veui-badge
    class="badge"
    value="New"
    status="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>
.badge {
  & + & {
    margin-left: 2em;
  }
}
</style>

Number badge

The content of the badge can also be a number. When the value exceeds the maximum value, it will be displayed as "{max}+".

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

Edit this demo on GitHubEdit

<template>
<article>
  <veui-badge
    class="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>
.badge {
  margin-right: 2em;
}
</style>

Corner badge

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

Running

New

Rejected

Auditing

Expired

Edit this demo on GitHubEdit

<template>
<article>
  <section>
    <veui-badge
      class="badge"
      status="success"
    >
      Running
    </veui-badge>
    <veui-badge
      class="badge"
      status="info"
    >
      New
    </veui-badge>
    <veui-badge class="badge">
      Rejected
    </veui-badge>
    <veui-badge
      class="badge"
      status="warning"
    >
      Auditing
    </veui-badge>
    <veui-badge
      class="badge"
      status="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;
}

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

Dot badge

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

Running

New

Rejected

Auditing

Expired

Edit this demo on GitHubEdit

<template>
<article>
  <section>
    <veui-badge
      class="badge"
      value="Running"
      status="success"
    />
    <veui-badge
      class="badge"
      value="New"
      status="info"
    />
    <veui-badge
      class="badge"
      value="Rejected"
    />
    <veui-badge
      class="badge"
      value="Auditing"
      status="warning"
    />
    <veui-badge
      class="badge"
      value="Expired"
      status="aux"
    />
  </section>
</article>
</template>

<script>
import { Badge } from 'veui'

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

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

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

API

Props

Name Type Default Description

status

string

'error'

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

Value	Description
`info`	Informational status.
`success`	Success status.
`warning`	Warning status.
`error`	Error status.
`aux`	Auxiliary status.

type string 'error' Deprecated. Use status instead.

value string | number - The value of the badge content. If it is of type number, it will be limited by the max prop. If it is of type string, the max prop will be ignored.

max number badge.max The maximum value of the badge number. When the value exceeds this value, the badge content will be displayed as {max}+. This prop will be ignored if the value is of type string.

hidden boolean false Whether the badge is in a hidden state.

Slots

Name	Description
`default`	The content to which the badge needs to be displayed.

Edit this page on GitHubEdit