Status Badges (.k-badge)
Compact visual indicators for categories, counts, and statuses. Supports semantic color variants and pill shape (.k-badge--pill).
Semantic Status Variants
Primary
Secondary
Success
Warning
Error
Info
Pill Badges (.k-badge--pill)
Active 12
Draft
Completed
Pending Review
Rejected
New Release
Badges Inside Headings & Buttons
Dashboard Overview
Live
Usage guide & code sample
Use badges for short status labels. Add a semantic modifier and .k-badge--pill when a fully rounded shape is preferred.
<span class="k-badge k-badge--success k-badge--pill">Completed</span>