Register

Badges

Short states that sit next to what they describe

Tones

Each tone has an icon, so the state reads without colour.

Completed Pending Overdue Draft Scheduled
Show the code 
<span class="badge badge-success">
<i class="ti ti-circle-check">
</i>Completed</span>
<span class="badge badge-warning">
<i class="ti ti-clock">
</i>Pending</span>
<span class="badge badge-danger">
<i class="ti ti-alert-circle">
</i>Overdue</span>
<span class="badge">
<i class="ti ti-point">
</i>Draft</span>
<span class="badge badge-info">
<i class="ti ti-info-circle">
</i>Scheduled</span>

In a table row

The common place for a badge.

Badge examples
Order Status
#5200 New
#5199 Packing
#5194 Delivered
Show the code 
<div class="table-wrap" data-allow-x data-scroller="Badge examples">
<table class="table">
<caption class="sr-only">Badge examples</caption>
<thead>
<tr>
<th scope="col">Order</th>
<th scope="col">Status</th>
</tr>
</thead>
<tbody>
<tr>
<td data-label="Order">
<span class="mono">#5200</span>
</td>
<td data-label="Status">
<span class="badge">
<i class="ti ti-point">
</i>New</span>
</td>
</tr>
<tr>
<td data-label="Order">
<span class="mono">#5199</span>
</td>
<td data-label="Status">
<span class="badge">
<i class="ti ti-point">
</i>Packing</span>
</td>
</tr>
<tr>
<td data-label="Order">
<span class="mono">#5194</span>
</td>
<td data-label="Status">
<span class="badge badge-success">
<i class="ti ti-circle-check">
</i>Delivered</span>
</td>
</tr>
</tbody>
</table>
</div>

Counts

A number on a button: the count is part of the button’s name.

Show the code 
<button type="button" class="btn">Unread <span class="badge badge-accent">3</span>
</button>
<button type="button" class="btn btn-ghost btn-icon dot-badge" aria-label="Notifications, 3 new" data-tip="Notifications">
<i class="ti ti-bell">
</i>
</button>

Accent and outline

For a feature, a plan, a tag.

Most chosen Beta seasonal
Show the code 
<span class="badge badge-accent">
<i class="ti ti-point">
</i>Most chosen</span>
<span class="badge badge-info">
<i class="ti ti-info-circle">
</i>Beta</span>
<span class="badge">
<i class="ti ti-tag">
</i>seasonal</span>