Badges - Clay

Badge Sizes

Badge Sizes have been removed. Use the clay-badge-size($sassMap) mixin to create custom badge sizes for your app.

Badge Pill

Primary Secondary Success Info Warning Danger Light Dark

<span class="badge badge-pill badge-primary">
	<span class="badge-item badge-item-expand">Primary</span>
</span>
<span class="badge badge-pill badge-secondary">
	<span class="badge-item badge-item-expand">Secondary</span>
</span>
<span class="badge badge-pill badge-success">
	<span class="badge-item badge-item-expand">Success</span>
</span>
<span class="badge badge-info badge-pill">
	<span class="badge-item badge-item-expand">Info</span>
</span>
<span class="badge badge-pill badge-warning">
	<span class="badge-item badge-item-expand">Warning</span>
</span>
<span class="badge badge-danger badge-pill">
	<span class="badge-item badge-item-expand">Danger</span>
</span>
<span class="badge badge-light badge-pill">
	<span class="badge-item badge-item-expand">Light</span>
</span>
<span class="badge badge-dark badge-pill">
	<span class="badge-item badge-item-expand">Dark</span>
</span>

Badges as Anchor Tag

badge badge-primary badge badge-secondary badge badge-success badge badge-info badge badge-warning badge badge-danger badge badge-light badge badge-dark

<a class="badge badge-primary" href="#1">
	<span class="badge-item badge-item-expand">badge badge-primary</span>
</a>

Badge with Links Inside

ReallySuperInsanelyJustIncrediblyLongAndTotallyNotPossibleWordButWeAre

<span class="badge badge-primary">
	<span class="badge-item badge-item-before">
		<a href="#1">
			<svg class="lexicon-icon lexicon-icon-times-circle" focusable="false" role="presentation">
				<use href="/images/icons/icons.svg#times-circle"></use>
			</svg>
		</a>
	</span>
	<span class="badge-item badge-item-before">
		<button class="btn btn-unstyled" type="button">
			<svg class="lexicon-icon lexicon-icon-picture" focusable="false" role="presentation">
				<use href="/images/icons/icons.svg#picture"></use>
			</svg>
		</button>
	</span>
	<span class="badge-item badge-item-expand">
		<a href="#1">ReallySuperInsanelyJustIncrediblyLongAndTotallyNotPossibleWordButWeAre</a>
	</span>
	<span class="badge-item badge-item-after">
		<svg class="lexicon-icon lexicon-icon-camera" focusable="false" role="presentation">
			<use href="/images/icons/icons.svg#camera"></use>
		</svg>
	</span>
	<span class="badge-item badge-item-after">
		<button aria-label="Close" class="close" type="button">
			<svg class="lexicon-icon lexicon-icon-times" focusable="false" role="presentation">
				<use href="/images/icons/icons.svg#times"></use>
			</svg>
		</button>
	</span>
</span>

Badge with Text Truncate

ReallySuperInsanelyJustIncrediblyLongAndTotallyNotPossibleWordButWeAre

<span class="badge badge-success">
	<span class="badge-item badge-item-before">
		<a href="#1">
			<svg class="lexicon-icon lexicon-icon-times-circle" focusable="false" role="presentation">
				<use href="/images/icons/icons.svg#times-circle"></use>
			</svg>
		</a>
	</span>
	<span class="badge-item badge-item-before">
		<button class="btn btn-unstyled" type="button">
			<svg class="lexicon-icon lexicon-icon-picture" focusable="false" role="presentation">
				<use href="/images/icons/icons.svg#picture"></use>
			</svg>
		</button>
	</span>
	<span class="badge-item badge-item-expand">
		<a class="text-truncate-inline" href="#1">
			<span class="text-truncate">ReallySuperInsanelyJustIncrediblyLongAndTotallyNotPossibleWordButWeAre</span>
		</a>
	</span>
	<span class="badge-item badge-item-after">
		<svg class="lexicon-icon lexicon-icon-camera" focusable="false" role="presentation">
			<use href="/images/icons/icons.svg#camera"></use>
		</svg>
	</span>
	<span class="badge-item badge-item-after">
		<button aria-label="Close" class="close" type="button">
			<svg class="lexicon-icon lexicon-icon-times" focusable="false" role="presentation">
				<use href="/images/icons/icons.svg#times"></use>
			</svg>
		</button>
	</span>
</span>