Badge

yarn add @clayui/badge

Badges help highlight important information, such as notifications or new and unread messages.

Stable 3.2.0 View in Lexicon CHANGELOG

Variations
Pill Badges
Anchor
Links Inside
Text Truncate

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

Variations

Add any of the below mentioned modifier classes to change the appearance of a badge.

Primary Secondary Success Info Warning Danger Light Dark

Code Sample (expand to see it)

<span class="badge badge-primary">
	<span class="badge-item badge-item-expand">Primary</span>
</span>

<span class="badge badge-secondary">
	<span class="badge-item badge-item-expand">Secondary</span>
</span>

<span class="badge badge-success">
	<span class="badge-item badge-item-expand">Success</span>
</span>

<span class="badge badge-info">
	<span class="badge-item badge-item-expand">Info</span>
</span>

<span class="badge badge-warning">
	<span class="badge-item badge-item-expand">Warning</span>
</span>

<span class="badge badge-danger">
	<span class="badge-item badge-item-expand">Danger</span>
</span>

<span class="badge badge-ligth">
	<span class="badge-item badge-item-expand">Light</span>
</span>

<span class="badge badge-dark">
	<span class="badge-item badge-item-expand">Dark</span>
</span>

Pill Badges

Use the .badge-pill modifier class to make badges more rounded.

Primary Secondary Success Info Warning Danger Light Dark

Code Sample (expand to see it)

<span class="badge badge-primary badge-pill">
	<span class="badge-item badge-item-expand">Primary</span>
</span>

<span class="badge badge-secondary badge-pill">
	<span class="badge-item badge-item-expand">Secondary</span>
</span>

<span class="badge badge-success badge-pill">
	<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-warning badge-pill">
	<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-ligth 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>

Anchor

Code Sample (expand to see it)

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

Links Inside

Secondary

Code Sample (expand to see it)

<span class="badge badge-secondary badge-pill">
	<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-expand">
		<a href="#1">Primary</a>
	</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>

Text Truncate

Wrap the text inside the .text-truncate-inline and .text-truncate modifier class.

ReallySuperInsanelyJustIncrediblyLongAndTotallyNotPossibleWordButWeAreReallySuperInsanelyJustIncrediblyLongAndTotallyNotPossibleWordButWeAre

Code Sample (expand to see it)

<span class="badge badge-secondary">
	<span class="badge-item badge-item-expand">
		<span class="text-truncate-inline">
			<span class="text-truncate">
				ReallySuperInsanelyJustIncrediblyLongAndTotallyNotPossibleWordButWeAre
				ReallySuperInsanelyJustIncrediblyLongAndTotallyNotPossibleWordButWeAre
			</span>
		</span>
	</span>
</span>