Labels - Clay

Label

Primary Secondary Success Info Warning Danger Light Dark

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

Label Dismissible

Normal Label thumbnail

Label Lg

<span class="label label-dismissible label-secondary">
	<span class="label-item label-item-before">
		<span class="sticker">
			<span class="sticker-overlay">
				<img alt="thumbnail" class="sticker-img" src="/images/thumbnail_dock.jpg">
			</span>
		</span>
	</span>
	<span class="label-item label-item-before">
		<svg class="lexicon-icon lexicon-icon-times-circle" focusable="false" role="presentation">
			<use href="/images/icons/icons.svg#times-circle"></use>
		</svg>
	</span>
	<span class="label-item label-item-before">
		<button class="btn btn-unstyled" type="button">
			<svg class="lexicon-icon lexicon-icon-add-cell" focusable="false" role="presentation">
				<use href="/images/icons/icons.svg#add-cell"></use>
			</svg>
		</button>
	</span>
	<span class="label-item label-item-expand">
		<a href="#1">Normal Label</a>
	</span>
	<span class="label-item label-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>

Label with Text Truncate

ReallySuperInsanelyJustIncrediblyLongAndTotallyNotPossibleWordButWeAreReallyTryingToCoverAllOurBasesHereJustInCaseSomeoneIsNutsAsPerUsual.

<span class="label label-dismissible label-lg label-success">
	<span class="label-item label-item-expand">
		<a class="text-truncate-inline" href="#1">
			<span class="text-truncate">ReallySuperInsanelyJustIncrediblyLongAndTotallyNotPossibleWordButWeAreReallyTryingToCoverAllOurBasesHereJustInCaseSomeoneIsNutsAsPerUsual.</span>
		</a>
	</span>
	<span class="label-item label-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>

An Interactive Label

Add the tabindex="0" attribute to the .label element to create an interactive label with multiple controls inside. The inner controls should have the attribute tabindex="-1" to remove them from the tab order. The inner controls can be placed back in the tab order by changing back to tabindex="0" with javascript.

Implementing Interactive Labels require custom javascript.

Label Secondary thumbnail

Label Primary

<span class="label label-dismissible label-secondary" tabindex="0">
	<span class="label-item label-item-before">
		<span class="sticker">
			<span class="sticker-overlay">
				<img alt="thumbnail" class="sticker-img" src="/images/thumbnail_dock.jpg">
			</span>
		</span>
	</span>
	<span class="label-item label-item-before">
		<button class="btn btn-unstyled" type="button" tabindex="-1">
			<svg class="lexicon-icon lexicon-icon-times-circle" focusable="false" role="presentation">
				<use href="/images/icons/icons.svg#times-circle"></use>
			</svg>
		</button>
	</span>
	<span class="label-item label-item-before">
		<a href="#1" role="button" tabindex="-1">
			<svg class="lexicon-icon lexicon-icon-add-cell" focusable="false" role="presentation">
				<use href="/images/icons/icons.svg#add-cell"></use>
			</svg>
		</a>
	</span>
	<span class="label-item label-item-expand">
		<a href="#1" tabindex="-1">Label Secondary</a>
	</span>
	<span class="label-item label-item-after">
		<button aria-label="Close" class="close" tabindex="-1" 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>

Interactive Label Examples

Label as Anchor Tag

Primary Secondary Success Info Warning Danger Light Dark

<a class="label label-primary" href="#1">
	<span class="label-item label-item-expand">Primary</span>
</a>
<a class="label label-secondary" href="#1">
	<span class="label-item label-item-expand">Secondary</span>
</a>
<a class="label label-success" href="#1">
	<span class="label-item label-item-expand">Success</span>
</a>
<a class="label label-info" href="#1">
	<span class="label-item label-item-expand">Info</span>
</a>
<a class="label label-warning" href="#1">
	<span class="label-item label-item-expand">Warning</span>
</a>
<a class="label label-danger" href="#1">
	<span class="label-item label-item-expand">Danger</span>
</a>
<a class="label label-light" href="#1">
	<span class="label-item label-item-expand">Light</span>
</a>
<a class="label label-dark" href="#1">
	<span class="label-item label-item-expand">Dark</span>
</a>

Label as Button Tag

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

Label Sizes

Normal Label Large Label

<span class="label label-secondary">
	<span class="label-item label-item-expand">Normal Label</span>
</span>
<span class="label label-lg label-success">
	<span class="label-item label-item-expand">Large Label</span>
</span>