Components · Badge · Use

Badge

Badge content and status are application data; this recipe has one visual construction with runtime presentations.

Markup

<div class="flex flex-wrap justify-center gap-space150">
	<span class="badge-root">8</span>
	<span class="badge-root badge-error">99+</span>
	<span class="badge-root badge-outlined">Draft</span>
	<span class="badge-root badge-dot" role="img" aria-label="Unread"></span>
</div>