Vue Badge - Material

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

Demo

Badge

<script setup>
// Vue Material Kit 2 component
import MaterialBadge from "@/components/MaterialBadge.vue";
</script>
<template>
 <MaterialBadge variant="gradient" color="success">
   Badge
 </MaterialBadge>
</template>

1<script setup>
2// Vue Material Kit 2 component
3import MaterialBadge from "@/components/MaterialBadge.vue";
4</script>
5<template>
6 <MaterialBadge variant="gradient" color="success">
7   Badge
8 </MaterialBadge>
9</template>

Props Information

Name	Type	Default	Description
color	'primary''secondary''info''success''warning''error''danger''light''dark''white'	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

<script setup>
// Vue Material Kit 2 component
import MaterialBadge from "@/components/MaterialBadge.vue";
</script>
<template>
  <MaterialBadge size="sm">Badge</MaterialBadge>
  <MaterialBadge size="md">Badge</MaterialBadge>
  <MaterialBadge size="lg">Badge</MaterialBadge>
</template>

1<script setup>
2// Vue Material Kit 2 component
3import MaterialBadge from "@/components/MaterialBadge.vue";
4</script>
5<template>
6  <MaterialBadge size="sm">Badge</MaterialBadge>
7  <MaterialBadge size="md">Badge</MaterialBadge>
8  <MaterialBadge size="lg">Badge</MaterialBadge>
9</template>

Variants

Fill

Gradient

<script setup>
// Vue Material Kit 2 component
import MaterialBadge from "@/components/MaterialBadge.vue";
</script>
<template>
  <MaterialBadge color="primary">Fill</MaterialBadge>
  <MaterialBadge variant="gradient" color="info">Gradient</MaterialBadge>
</template>

1<script setup>
2// Vue Material Kit 2 component
3import MaterialBadge from "@/components/MaterialBadge.vue";
4</script>
5<template>
6  <MaterialBadge color="primary">Fill</MaterialBadge>
7  <MaterialBadge variant="gradient" color="info">Gradient</MaterialBadge>
8</template>