Badges
Soft, solid and outline badges in the alert colour set (primary, success, danger, warning, info, light, dark), plus counters, status dots and tags.
Soft
.badge-soft
Default
Primary
Success
Danger
Warning
Info
Light
Dark
Pill .badge-pill
Primary
Success
Danger
Warning
Info
Light
Dark
With dot .badge-dot
Primary
Success
Danger
Warning
Info
Light
Dark
Solid
.badge-solid
Default
Primary
Success
Danger
Warning
Info
Light
Dark
Pill
Primary
Success
Danger
Warning
Info
Light
Dark
With dot
Primary
Success
Danger
Warning
Info
Light
Dark
Outline
.badge-outline
Default
Primary
Success
Danger
Warning
Info
Light
Dark
Pill
Primary
Success
Danger
Warning
Info
Light
Dark
With dot
Primary
Success
Danger
Warning
Info
Light
Dark
Sizes & Icons
Sizes
.badge-sm · default · .badge-lg
Small
Default
Large
Small
Default
Large
With icons
Verified
Hot
Pending
Public
Private
Admin
New
Trends
12.4%
3.1%
0.0%
Icon only .badge-square
Counters & Notifications
.badge-count · .badge-pip
Counters
Pinned to icons
3
8
12
5
27
99+
4
16
In buttons
.badge-anchor
3
14
Avatar presence .presence
NM
Online
TM
Away
JF
Busy
CM
Offline
Removable Tags & Filters
Active filters
Tags
# corporate
# web design
# hosting
# support
Recipients
Sophie Laurent
Oliver Bennett
All editors
In Context
Headings
Languages
Media Library New
Translations Beta
Content status.badge-status (used in tables)
Published
Pending
Scheduled
Draft
Archived
Rejected
List with roles and plans
NM
Nurdin Mukhambet
Owner
TM
Thomas Müller
Editor
JF
Julia Fischer
Author
Invited
.code-tag
2 of 3 translated