new
The real time chat demo: Ping →

Badges

Standalone

Hello
Hello
Hello
Hello
<x-badge value="Hello" />
 
<x-badge value="Hello" class="badge-primary" />
 
<x-badge value="Hello" class="badge-warning" />
 
<x-badge value="Hello" class="bg-purple-500/10 " />

Combined

<x-button>
Inbox
<x-badge value="+99" class="badge-neutral" />
</x-button>
 
<x-button class="indicator">
Inbox
<x-badge value="7" class="badge-secondary indicator-item" />
</x-button>
 
<x-button icon="o-bell" class="btn-circle relative">
<x-badge value="2" class="badge-error absolute -right-2 -top-2" />
</x-button>

maryUI
Sponsor