Vue Badge - Argon

Documentation and examples for Bootstrap badges, our small count and labelling component.

Demo

Badge

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

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

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

Props Information

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

Sizes

Badge

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

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

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

Variants

Fill

Gradient

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

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

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