Journey

Badges are used to label, organize, or categorize objects. They might be used to show status, in which case they will have associated status attributes like color and possibly icon. Or they may be used as labels or tags to help organize and categorize information. Finally, they may be used to showcase minute informative details like file type, file size, or versions.

Anatomy #

Element #

Label #

Icon #

Guidance #

Examples #

There are five label styles: Default, Info, Success, Warning, and Danger.

<div class="badges">
	<div class="badge">Default</div>
	<div class="badge info">Info</div>
	<div class="badge success">Success</div>
	<div class="badge warning">Warning</div>
	<div class="badge danger">Danger</div>
</div>

<div class="badges">
	<div class="small badge">Small Badge</div>
	<div class="badge">Default Badge</div>
	<div class="large badge">Large Badge</div>
</div>