Vue Badge - Soft UI

Use our Vue.js badges as elements to show counts or labels separately or inside other components. They usually appear in proximity to notifications or user avatars with eye-catching appeal.

Find below some examples of badge components that can be modified by the style and size using Vue Soft UI Dashboard.

Default Badge

Use this example to create simple and versatile badges.

Badge

<template>
 <soft-badge variant="gradient" color="success">
   Badge
 </soft-badge>
</template>

<script>
import SoftBadge from "@/components/SoftBadge.vue";
export default { components: { SoftBadge, }, };
</script>

1<template>
2 <soft-badge variant="gradient" color="success">
3   Badge
4 </soft-badge>
5</template>
6
7<script>
8import SoftBadge from "@/components/SoftBadge.vue";
9export default { components: { SoftBadge, }, };
10</script>

Props Information

Name	Type	Default	Description
color	'primary''secondary''info''success''warning''danger''light''dark'	success	Change the `SoftBadge` background color.
variant	'gradient''fill'	fill	Change the `SoftBadge` background type.
size	'sm''md''lg'	md	Change the `SoftBadge` size.
circle	bool	false	Make the `SoftBadge` circular.
floating	bool	false
slot*	node		The `SoftBadge` has a default slot that you can pass node or content inside it

Badge Sizes

Use these examples to create badges of different sizes.

Badge

<template>
  <soft-badge size="sm">Badge</soft-badge>
  <soft-badge size="md">Badge</soft-badge>
  <soft-badge size="lg">Badge</soft-badge>
</template>

<script>
import SoftBadge from "@/components/SoftBadge.vue";
export default { components: { SoftBadge, }, };
</script>

1<template>
2  <soft-badge size="sm">Badge</soft-badge>
3  <soft-badge size="md">Badge</soft-badge>
4  <soft-badge size="lg">Badge</soft-badge>
5</template>
6
7<script>
8import SoftBadge from "@/components/SoftBadge.vue";
9export default { components: { SoftBadge, }, };
10</script>

Badge Variants

Use these examples to create awesome badges in different styles: filled and with gradient.

Fill

Gradient

<template>
 <soft-badge>Fill</soft-badge>
 <soft-badge variant="gradient" color="success">Gradient</soft-badge>
</template>

<script>
import SoftBadge from "@/components/SoftBadge.vue";
export default { components: { SoftBadge, }, };
</script>

1<template>
2 <soft-badge>Fill</soft-badge>
3 <soft-badge variant="gradient" color="success">Gradient</soft-badge>
4</template>
5
6<script>
7import SoftBadge from "@/components/SoftBadge.vue";
8export default { components: { SoftBadge, }, };
9</script>