Register

Badges

Short states that sit next to what they describe

Tones

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

CompletedPendingOverdueDraftScheduled
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
OrderStatus
#5200New
#5199Packing
#5194Delivered
Show the code
<div class="table-wrap" data-allow-x data-scroller="Badge examples">
<table class="table stack-sm">
<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 chosenBetaseasonal
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>