Dragonglass

Badges

Generated badge content selected by data-badge.

Badge colors

1 notification
<span data-badge="1" class="after:bg-primary">1 notification</span>
1 notification
<span data-badge="1" class="after:bg-accent">1 notification</span>
1 notification
<span data-badge="1" class="after:bg-info">1 notification</span>
1 notification
<span data-badge="1" class="after:bg-success">1 notification</span>
1 notification
<span data-badge="1" class="after:bg-warning">1 notification</span>
1 notification
<span data-badge="1" class="after:bg-danger">1 notification</span>
1 notification
<span data-badge="1" class="after:bg-default">1 notification</span>

Badge API

Badge attributes and color utilities
NameTypeDefaultDescription
data-badgeHTML data attributeRequiredSupplies the short visual value rendered by the ::after pseudo-element.
after:bg-{color}Pseudo-element color utilitybg-whiteSets the badge background to primary, accent, info, success, warning, danger or default.