Badges
data-badge on any inline element. Add data-type for semantic colors.
Default badges
Notifications 3
Messages 12
Status
Alerts !
Errors 5
Info new
<span>Notifications <span data-badge>3</span></span>
<span>Messages <span data-badge>12</span></span>
<span>Status <span data-badge data-type="success"></span></span>
<span>Alerts <span data-badge data-type="warning">!</span></span>
<span>Errors <span data-badge data-type="danger">5</span></span>
<span>Info <span data-badge data-type="secondary">new</span></span>Pill variant
data-badge="pill" for wider padding — good for labels and tags.
Default
Shipped
Pending
Failed
Draft
<span data-badge="pill">Default</span>
<span data-badge="pill" data-type="success">Shipped</span>
<span data-badge="pill" data-type="warning">Pending</span>
<span data-badge="pill" data-type="danger">Failed</span>
<span data-badge="pill" data-type="secondary">Draft</span>