Variations

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

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

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

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

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

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

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

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

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

Badge Sass API

The map $badge-palette allows generating any number of badge variants. If a key starts with ., #, or ’%’ Clay will output it as is, otherwise we will prepend .badge- to the key (e.g., .badge-primary). It will also generate a Sass placeholder prefixed by %badge- (e.g., %badge-primary).

$badge-palette: (
	primary: (
		background-color: $primary
	),
	'.badge-primary-2': (
		extend: '%badge-primary'
	),
	'%badge-tertiary': (
		background-color: green
	),
	'.badge-tertiary': (
		extend: '%badge-tertiary'
	),
	'.badge-quaternary': (
		extend: '%badge-tertiary'
	)
);

Outputs:

.badge-primary,
.badge-primary-2 {
	background-color: #0b5fff;
}

.badge-tertiary,
.badge-quaternary {
	background-color: green;
}

Pill Badges

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

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

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

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

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

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

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

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

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

Anchor

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

Links Inside

<span className="badge badge-secondary badge-pill">
	<span className="badge-item badge-item-before">
		<a href="#1">
			<svg
				className="lexicon-icon lexicon-icon-times-circle"
				focusable="false"
				role="presentation"
			>
				<use href="/images/icons/icons.svg#times-circle"></use>
			</svg>
		</a>
	</span>
	<span className="badge-item badge-item-expand">
		<a href="#1">Primary</a>
	</span>
	<span className="badge-item badge-item-after">
		<button aria-label="Close" className="close" type="button">
			<svg
				className="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.

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