Aware Controls | JavaScript (ES5) Badge Demos

The Badge control is pure CSS used to display an indicator or count, often for purposes like mail notifications or alerts.
Basic Functionality

Demonstrates the basic functionality of the Badge control.
Primary
Secondary
Information
Success
Warning
Danger
Light
Dark
<div class="form-horizontal form-bordered">
	<div class="form-group row">
		<label class="form-label col-form-label col-lg-4">Primary</label>
		<div class="col-lg-8">
			<div class="a-badge-container">
				<div class="a-badge-block">
					<button class="a-btn">Primary</button>
					<span class="a-badge a-badge-primary a-badge-notification a-badge-overlap">11</span>
				</div>
			</div>
		</div>
	</div>
	<div class="form-group row">
		<label class="form-label col-form-label col-lg-4">Secondary</label>
		<div class="col-lg-8">
			<div class="a-badge-container">
				<div class="a-badge-block">
					<button class="a-btn">Secondary</button>
					<span class="a-badge a-badge-secondary a-badge-notification a-badge-overlap">22</span>
				</div>
			</div>
		</div>
	</div>
	<div class="form-group row">
		<label class="form-label col-form-label col-lg-4">Information</label>
		<div class="col-lg-8">
			<div class="a-badge-container">
				<div class="a-badge-block">
					<button class="a-btn">Information</button>
					<span class="a-badge a-badge-info a-badge-notification a-badge-overlap">33</span>
				</div>
			</div>
		</div>
	</div>
	<div class="form-group row">
		<label class="form-label col-form-label col-lg-4">Success</label>
		<div class="col-lg-8">
			<div class="a-badge-container">
				<div class="a-badge-block">
					<button class="a-btn">Success</button>
					<span class="a-badge a-badge-success a-badge-notification a-badge-overlap">44</span>
				</div>
			</div>
		</div>
	</div>
	<div class="form-group row">
		<label class="form-label col-form-label col-lg-4">Warning</label>
		<div class="col-lg-8">
			<div class="a-badge-container">
				<div class="a-badge-block">
					<button class="a-btn">Warning</button>
					<span class="a-badge a-badge-warning a-badge-notification a-badge-overlap">55</span>
				</div>
			</div>
		</div>
	</div>
	<div class="form-group row">
		<label class="form-label col-form-label col-lg-4">Danger</label>
		<div class="col-lg-8">
			<div class="a-badge-container">
				<div class="a-badge-block">
					<button class="a-btn">Danger</button>
					<span class="a-badge a-badge-danger a-badge-notification a-badge-overlap">66</span>
				</div>
			</div>
		</div>
	</div>
	<div class="form-group row">
		<label class="form-label col-form-label col-lg-4">Light</label>
		<div class="col-lg-8">
			<div class="a-badge-container">
				<div class="a-badge-block">
					<button class="a-btn">Light</button>
					<span class="a-badge a-badge-light a-badge-notification a-badge-overlap">77</span>
				</div>
			</div>
		</div>
	</div>
	<div class="form-group row">
		<label class="form-label col-form-label col-lg-4">Dark</label>
		<div class="col-lg-8">
			<div class="a-badge-container">
				<div class="a-badge-block">
					<button class="a-btn">Dark</button>
					<span class="a-badge a-badge-dark a-badge-notification a-badge-overlap">88</span>
				</div>
			</div>
		</div>
	</div>
</div>