Nuxt Badge - Argon

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

Demo

Badge

<template>
  <ArgonBadge variant="gradient" color="success">
    Badge
  </ArgonBadge>
</template>

1<template>
2  <ArgonBadge variant="gradient" color="success">
3    Badge
4  </ArgonBadge>
5</template>

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>
  <ArgonBadge size="sm">Badge</ArgonBadge>
  <ArgonBadge size="md">Badge</ArgonBadge>
  <ArgonBadge size="lg">Badge</ArgonBadge>
</template>

1<template>
2  <ArgonBadge size="sm">Badge</ArgonBadge>
3  <ArgonBadge size="md">Badge</ArgonBadge>
4  <ArgonBadge size="lg">Badge</ArgonBadge>
5</template>

Variants

Fill

Gradient

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

1<template>
2  <ArgonBadge>Fill</vsud-badge>
3  <ArgonBadge variant="gradient" color="success">Gradient</ArgonBadge>
4</template>