Vue Badge - Material

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

Demo

Badge

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

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

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

Props Information

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

Sizes

Badge

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

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

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

Variants

Fill

Gradient

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

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

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