VsudBadge

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

Demo

Badge

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

<script>
  import VsudBadge from "@/components/VsudBadge.vue";

  export default {
    components: {
       VsudBadge,
       },
   };
</script>

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

Props Information

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

Sizes

Badge

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

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

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

Variants

Fill

Gradient

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

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

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