Badge

6 types of badge design are available inside badge menu. You can use any of this. To use this follow the instruct code example given below.

Basic Example

To show this type of badge you will need this code in down here.

     
<Badge color="primary">Primary</Badge>
<Badge color="secondary">Secondary</Badge>
<Badge color="success">Success</Badge>
<Badge color="danger">Danger</Badge>
<Badge color="warning">Warning</Badge>
<Badge color="info">Info</Badge>
<Badge color="light">Light</Badge>
<Badge color="dark">Dark</Badge>
  

Pill Badges

Use the .badge-pill modifier class to make badges more rounded (with a larger border-radius and additional horizontal padding). Useful if you miss the badges from v3.

     
<Badge color="primary" pill>Primary</Badge>
<Badge color="secondary" pill>Secondary</Badge>
<Badge color="success" pill>Success</Badge>
<Badge color="danger" pill>Danger</Badge>
<Badge color="warning" pill>Warning</Badge>
<Badge color="info" pill>Info</Badge>
<Badge color="light" pill>Light</Badge>
<Badge color="dark" pill>Dark</Badge>
   

Available parameters, type and descriptions are down below.

Name	Type	Default	Description
badgeContent *	node		The content rendered within the badge.
children *	node		The badge will be added relative to this node.
classes	object		Useful to extend the style applied to components.
color	enum: 'default' |  'primary' |  'secondary' |  'error'	'default'	The color of the component. It supports those theme colors that make sense for this component.
component	union: string |  func	'span'	The component used for the root node. Either a string to use a DOM element or a component.