Badge

Default

Use .badge to display a small, passive label.

Default

<span class="badge">Default</span>

Background colors

Combine .badge with background color utilities.

<span class="badge bg-primary">Primary</span>
<span class="badge bg-secondary">Secondary</span>
<span class="badge bg-success">Success</span>
<span class="badge bg-warning">Warning</span>
<span class="badge bg-error">Error</span>
<span class="badge bg-inverse text-inverse">Inverse</span>

Status examples

Use badges to show states or metadata.

<span class="badge bg-success">Active</span>
<span class="badge bg-warning">Pending</span>
<span class="badge bg-error">Failed</span>
<span class="badge bg-primary">New</span>
<span class="badge bg-inverse text-inverse">v1.0.0</span>

In text

Badges can be used inline with text.

Package version v1.0.0

<p>Package version <span class="badge bg-inverse text-inverse">v1.0.0</span></p>

In buttons

Badges can also be placed inside buttons to show small counts or states.

Notifications 3

<button class="btn btn-primary btn-solid" type="button">
	Notifications
	<span class="badge bg-inverse text-inverse">3</span>
</button>

In tables

Badges are useful for displaying compact states in structured data.

Name	Status
Project Alpha	Active
Project Beta	Pending
Project Gamma	Failed

<table class="table">
	<tbody>
		<tr>
			<td>Project Alpha</td>
			<td><span class="badge bg-success">Active</span></td>
		</tr>
		<tr>
			<td>Project Beta</td>
			<td><span class="badge bg-warning">Pending</span></td>
		</tr>
		<tr>
			<td>Project Gamma</td>
			<td><span class="badge bg-error">Failed</span></td>
		</tr>
	</tbody>
</table>