<span class="badge me-1 badge-success">Success</span>
<span class="badge me-1 badge-danger">Error</span>
<span class="badge me-1 badge-warning">Warning</span>
<span class="badge me-1 badge-info">Information</span>

<span class="badge badge-counter">1</span>
<span class="badge badge-counter">23</span>
<span class="badge badge-counter">100+</span>

<span class="badge mb-2 me-2 badge-filter">Filter Label <button type="button" class="btn-close" aria-label="Close"></button></span>
<span class="badge mb-2 me-2 badge-filter">Very Long Filter Label <button type="button" class="btn-close" aria-label="Close"></button></span>

<span class="badge me-1 badge-danger">
<svg class="icon" width="18px" height="18px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <path stroke="none" stroke-width="1" fill="currentColor" fill-rule="evenodd" d="M12,24 C18.627417,24 24,18.627417 24,12 C24,5.372583 18.627417,0 12,0 C5.372583,0 0,5.372583 0,12 C0,18.627417 5.372583,24 12,24 Z M11.9899936,17.6323846 C11.2046777,17.6323846 10.604142,17.0317707 10.604142,16.2463526 C10.604142,15.4609344 11.2046777,14.8603205 11.9899936,14.8603205 C12.7753095,14.8603205 13.3758451,15.4609344 13.3758451,16.2463526 C13.3758451,17.0317707 12.7753095,17.6323846 11.9899936,17.6323846 Z M13.3758451,13.4742885 C13.3758451,13.7514949 13.1910649,13.9362991 12.9138946,13.9362991 L11.0660925,13.9362991 C10.7889222,13.9362991 10.604142,13.7514949 10.604142,13.4742885 L10.604142,7.46814957 C10.604142,7.19094316 10.7889222,7.00613889 11.0660925,7.00613889 L12.9138946,7.00613889 C13.1910649,7.00613889 13.3758451,7.19094316 13.3758451,7.46814957 L13.3758451,13.4742885 Z" id="Shape" fill="#111111" fill-rule="nonzero"></path>
</svg>Action Required
</span>

<span class="badge me-1 badge-warning">
<svg class="icon" width="18px" height="18px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <path stroke="none" stroke-width="1" fill="currentColor" fill-rule="evenodd" d="M12,24 C18.627417,24 24,18.627417 24,12 C24,5.372583 18.627417,0 12,0 C5.372583,0 0,5.372583 0,12 C0,18.627417 5.372583,24 12,24 Z M11.9899936,17.6323846 C11.2046777,17.6323846 10.604142,17.0317707 10.604142,16.2463526 C10.604142,15.4609344 11.2046777,14.8603205 11.9899936,14.8603205 C12.7753095,14.8603205 13.3758451,15.4609344 13.3758451,16.2463526 C13.3758451,17.0317707 12.7753095,17.6323846 11.9899936,17.6323846 Z M13.3758451,13.4742885 C13.3758451,13.7514949 13.1910649,13.9362991 12.9138946,13.9362991 L11.0660925,13.9362991 C10.7889222,13.9362991 10.604142,13.7514949 10.604142,13.4742885 L10.604142,7.46814957 C10.604142,7.19094316 10.7889222,7.00613889 11.0660925,7.00613889 L12.9138946,7.00613889 C13.1910649,7.00613889 13.3758451,7.19094316 13.3758451,7.46814957 L13.3758451,13.4742885 Z" id="Shape" fill="#111111" fill-rule="nonzero"></path>
</svg>Please Review
</span>

<span class="badge me-1 badge-success">
<svg class="icon" width="18px" height="18px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <path stroke="none" stroke-width="1" fill="currentColor" fill-rule="evenodd" d="M12,0 C18.627,0 24,5.373 24,12 C24,18.627 18.627,24 12,24 C5.373,24 0,18.627 0,12 C0,5.373 5.373,0 12,0 Z M19.0191,6.40035 C18.4116,5.83635 17.4621,5.87385 16.8996,6.47985 L10.7091,13.16385 L6.9891,9.90435 C6.3651,9.35535 5.4156,9.42135 4.8726,10.04385 C4.3251,10.66635 4.3881,11.61435 5.0106,12.16035 L9.8286,16.38135 C10.1136,16.63035 10.4661,16.75335 10.8171,16.75335 C11.2206,16.75335 11.6241,16.59135 11.9181,16.27335 L19.1001,8.51985 C19.6641,7.91085 19.6281,6.96285 19.0191,6.40035 Z" id="Combined-Shape" fill="#111111"></path>
</svg>Done
</span>