'/%3e%3cpath%20d='M19.3718%208.44531C13.2794%208.77342%208.42255%2013.8273%208.42255%2020.0001V34.643C8.42255%2036.336%207.05011%2037.7085%205.35714%2037.7085C3.66416%2037.7085%202.29171%2036.336%202.29171%2034.643V22.0124C5.86298%2012.0352%2013.2293%208.65628%2019.3718%208.44531Z'%20fill='url(%23paint1_linear_1134_24406)'/%3e%3cpath%20d='M24.111%2018.6378L20.8502%2019.8353L19.6368%2023.0902L18.4392%2019.8294L15.1843%2018.616L18.4451%2017.4184L19.6586%2014.1636L20.8561%2017.4243L24.111%2018.6378Z'%20fill='url(%23paint2_linear_1134_24406)'/%3e%3cpath%20d='M26.0749%2014.0398L24.7502%2014.5263L24.2573%2015.8486L23.7708%2014.5239L22.4485%2014.0309L23.7732%2013.5444L24.2661%2012.2221L24.7526%2013.5468L26.0749%2014.0398Z'%20fill='url(%23paint3_linear_1134_24406)'/%3e%3cdefs%3e%3clinearGradient%20id='paint0_linear_1134_24406'%20x1='21.5672'%20y1='33.2429'%20x2='17.6287'%20y2='7.94212'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20stop-color='%235711F6'/%3e%3cstop%20offset='0.5'%20stop-color='%239614EB'/%3e%3cstop%20offset='1'%20stop-color='%23FF1ADE'/%3e%3c/linearGradient%3e%3clinearGradient%20id='paint1_linear_1134_24406'%20x1='5.99286'%20y1='14.1017'%20x2='11.3239'%20y2='34.0911'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20stop-color='%235711F6'/%3e%3cstop%20offset='0.5'%20stop-color='%239614EB'/%3e%3cstop%20offset='1'%20stop-color='%23FF1ADE'/%3e%3c/linearGradient%3e%3clinearGradient%20id='paint2_linear_1134_24406'%20x1='16.5589'%20y1='17.1615'%20x2='24.3278'%20y2='18.3903'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20stop-color='%235711F6'/%3e%3cstop%20offset='0.5'%20stop-color='%239614EB'/%3e%3cstop%20offset='1'%20stop-color='%23FF1ADE'/%3e%3c/linearGradient%3e%3clinearGradient%20id='paint3_linear_1134_24406'%20x1='16.5589'%20y1='17.1615'%20x2='24.3278'%20y2='18.3903'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20stop-color='%235711F6'/%3e%3cstop%20offset='0.5'%20stop-color='%239614EB'/%3e%3cstop%20offset='1'%20stop-color='%23FF1ADE'/%3e%3c/linearGradient%3e%3c/defs%3e%3c/svg%3e)
Default Badge
Primary
Dark
Success
Warning
Info
Error
<div class="flex items-start flex-wrap gap-4">
<span class="badge rounded-md text-xs font-medium bg-primary text-white">Primary</span>
<span class="badge rounded-md text-xs font-medium bg-dark text-white">Dark</span>
<span class="badge rounded-md text-xs font-medium bg-success text-white">Success</span>
<span class="badge rounded-md text-xs font-medium bg-warning text-white">Warning</span>
<span class="badge rounded-md text-xs font-medium bg-info text-white">Info</span>
<span class="badge rounded-md text-xs font-medium bg-danger text-white">Error</span>
</div>
Rounded Badge
Primary
Dark
Success
Warning
Info
Error
<div class="flex items-start flex-wrap gap-4">
<span class="badge rounded-full text-xs font-medium bg-primary text-white">Primary</span>
<span class="badge rounded-full text-xs font-medium bg-dark text-white">Dark</span>
<span class="badge rounded-full text-xs font-medium bg-success text-white">Success</span>
<span class="badge rounded-full text-xs font-medium bg-warning text-white">Warning</span>
<span class="badge rounded-full text-xs font-medium bg-info text-white">Info</span>
<span class="badge rounded-full text-xs font-medium bg-danger text-white">Error</span>
</div>
Ghost Badge Flat
Primary
Dark
Success
Warning
Info
Error
<div class="flex items-start flex-wrap gap-4">
<span class="badge rounded-lg text-xs font-medium bg-primary-50 text-primary border border-primary">Primary</span>
<span class="badge rounded-lg text-xs font-medium bg-light text-dark border border-border-color">Dark</span>
<span class="badge rounded-lg text-xs font-medium bg-success-50 text-success border border-success">Success</span>
<span class="badge rounded-lg text-xs font-medium bg-warning-50 text-warning border border-warning">Warning</span>
<span class="badge rounded-lg text-xs font-medium bg-info-50 text-info border border-info">Info</span>
<span class="badge rounded-lg text-xs font-medium bg-danger-50 text-danger border border-danger">Error</span>
</div>
Ghost Badge Rounded
Primary
Dark
Success
Warning
Info
Error
<div class="flex items-start flex-wrap gap-4">
<span class="badge rounded-full text-xs font-medium bg-primary-50 text-primary border border-primary">Primary</span>
<span class="badge rounded-full text-xs font-medium bg-light text-dark border border-border-color">Dark</span>
<span class="badge rounded-full text-xs font-medium bg-success-50 text-success border border-success">Success</span>
<span class="badge rounded-full text-xs font-medium bg-warning-50 text-warning border border-warning">Warning</span>
<span class="badge rounded-full text-xs font-medium bg-info-50 text-info border border-info">Info</span>
<span class="badge rounded-full text-xs font-medium bg-danger-50 text-danger border border-danger">Error</span>
</div>
Default Badge Sizes
Primary
Dark
Success
Warning
Info
Error
Primary
Dark
Success
Warning
Info
Error
<div class="flex items-start flex-wrap justify-between mb-5">
<span class="badge-small rounded-md text-xs font-medium bg-primary text-white">Primary</span>
<span class="badge-small rounded-md text-xs font-medium bg-dark text-white">Dark</span>
<span class="badge-small rounded-md text-xs font-medium bg-success text-white">Success</span>
<span class="badge-small rounded-md text-xs font-medium bg-warning text-white">Warning</span>
<span class="badge-small rounded-md text-xs font-medium bg-info text-white">Info</span>
<span class="badge-small rounded-md text-xs font-medium bg-danger text-white border">Error</span>
</div>
<div class="flex items-start flex-wrap gap-4">
<span class="badge rounded-md text-xs font-medium bg-primary text-white">Primary</span>
<span class="badge rounded-md text-xs font-medium bg-dark text-white">Dark</span>
<span class="badge rounded-md text-xs font-medium bg-success text-white">Success</span>
<span class="badge rounded-md text-xs font-medium bg-warning text-white">Warning</span>
<span class="badge rounded-md text-xs font-medium bg-info text-white">Info</span>
<span class="badge rounded-md text-xs font-medium bg-danger text-white">Error</span>
</div>
Ghost Badge Sizes
Primary
Dark
Success
Warning
Info
Error
Primary
Dark
Success
Warning
Info
Error
<div class="flex items-start flex-wrap justify-between mb-5">
<span class="badge-small rounded-md text-xs font-medium bg-primary-50 text-primary border border-primary">Primary</span>
<span class="badge-small rounded-md text-xs font-medium bg-light text-dark border border-border-color">Dark</span>
<span class="badge-small rounded-md text-xs font-medium bg-success-50 text-success border border-success">Success</span>
<span class="badge-small rounded-md text-xs font-medium bg-warning-50 text-warning border border-warning">Warning</span>
<span class="badge-small rounded-md text-xs font-medium bg-info-50 text-info border border-info">Info</span>
<span class="badge-small rounded-md text-xs font-medium bg-danger-50 text-danger border border-danger">Error</span>
</div>
<div class="flex items-start flex-wrap gap-4">
<span class="badge rounded-lg text-xs font-medium bg-primary-50 text-primary border border-primary">Primary</span>
<span class="badge rounded-lg text-xs font-medium bg-light text-dark border border-border-color">Dark</span>
<span class="badge rounded-lg text-xs font-medium bg-success-50 text-success border border-success">Success</span>
<span class="badge rounded-lg text-xs font-medium bg-warning-50 text-warning border border-warning">Warning</span>
<span class="badge rounded-lg text-xs font-medium bg-info-50 text-info border border-info">Info</span>
<span class="badge rounded-lg text-xs font-medium bg-danger-50 text-danger border border-danger">Error</span>
</div>
Default Badge with Left Icon
Primary
Dark
Success
Warning
Info
Error
<div class="flex items-start flex-wrap gap-4">
<span class="inline-flex items-center badge rounded-md text-xs font-medium bg-primary text-white"><i class="icon icon-check me-1"></i> Primary</span>
<span class="inline-flex items-center badge rounded-md text-xs font-medium bg-dark text-white"><i class="icon icon-check me-1"></i> Dark</span>
<span class="inline-flex items-center badge rounded-md text-xs font-medium bg-success text-white"><i class="icon icon-check me-1"></i> Success</span>
<span class="inline-flex items-center badge rounded-md text-xs font-medium bg-warning text-white"><i class="icon icon-check me-1"></i> Warning</span>
<span class="inline-flex items-center badge rounded-md text-xs font-medium bg-info text-white"><i class="icon icon-check me-1"></i> Info</span>
<span class="inline-flex items-center badge rounded-md text-xs font-medium bg-danger text-white"><i class="icon icon-check me-1"></i> Error</span>
</div>
Rounded Badge with Left Icon
Primary
Dark
Success
Warning
Info
Error
<div class="flex items-start flex-wrap gap-4">
<span class="inline-flex items-center badge rounded-full text-xs font-medium bg-primary text-white"><i class="icon icon-check me-1"></i> Primary</span>
<span class="inline-flex items-center badge rounded-full text-xs font-medium bg-dark text-white"><i class="icon icon-check me-1"></i> Dark</span>
<span class="inline-flex items-center badge rounded-full text-xs font-medium bg-success text-white"><i class="icon icon-check me-1"></i> Success</span>
<span class="inline-flex items-center badge rounded-full text-xs font-medium bg-warning text-white"><i class="icon icon-check me-1"></i> Warning</span>
<span class="inline-flex items-center badge rounded-full text-xs font-medium bg-info text-white"><i class="icon icon-check me-1"></i> Info</span>
<span class="inline-flex items-center badge rounded-full text-xs font-medium bg-danger text-white"><i class="icon icon-check me-1"></i> Error</span>
</div>
Ghost Badge Flat with Left Icon
Primary
Dark
Success
Warning
Info
Error
<div class="flex items-start flex-wrap gap-4">
<span class="inline-flex items-center badge rounded-lg text-xs font-medium bg-primary-50 text-primary border border-primary"><i class="icon icon-check me-1"></i> Primary</span>
<span class="inline-flex items-center badge rounded-lg text-xs font-medium bg-light text-dark border border-border-color"><i class="icon icon-check me-1"></i> Dark</span>
<span class="inline-flex items-center badge rounded-lg text-xs font-medium bg-success-50 text-success border border-success"><i class="icon icon-check me-1"></i> Success</span>
<span class="inline-flex items-center badge rounded-lg text-xs font-medium bg-warning-50 text-warning border border-warning"><i class="icon icon-check me-1"></i> Warning</span>
<span class="inline-flex items-center badge rounded-lg text-xs font-medium bg-info-50 text-info border border-info"><i class="icon icon-check me-1"></i> Info</span>
<span class="inline-flex items-center badge rounded-lg text-xs font-medium bg-danger-50 text-danger border border-danger"><i class="icon icon-check me-1"></i> Error</span>
</div>
Ghost Badge Rounded with Left Icon
Primary
Dark
Success
Warning
Info
Error
<div class="flex items-start flex-wrap gap-4">
<span class="inline-flex items-center badge rounded-full text-xs font-medium bg-primary-50 text-primary border border-primary"><i class="icon icon-check me-1"></i> Primary</span>
<span class="inline-flex items-center badge rounded-full text-xs font-medium bg-light text-dark border border-border-color"><i class="icon icon-check me-1"></i> Dark</span>
<span class="inline-flex items-center badge rounded-full text-xs font-medium bg-success-50 text-success border border-success"><i class="icon icon-check me-1"></i> Success</span>
<span class="inline-flex items-center badge rounded-full text-xs font-medium bg-warning-50 text-warning border border-warning"><i class="icon icon-check me-1"></i> Warning</span>
<span class="inline-flex items-center badge rounded-full text-xs font-medium bg-info-50 text-info border border-info"><i class="icon icon-check me-1"></i> Info</span>
<span class="inline-flex items-center badge rounded-full text-xs font-medium bg-danger-50 text-danger border border-danger"><i class="icon icon-check me-1"></i> Error</span>
</div>
Default Badge with Right Icon
Primary
Dark
Success
Warning
Info
Error
<div class="flex items-start flex-wrap gap-4">
<span class="inline-flex items-center badge rounded-md text-xs font-medium bg-primary text-white">Primary <i class="icon icon-x ms-1"></i></span>
<span class="inline-flex items-center badge rounded-md text-xs font-medium bg-dark text-white">Dark <i class="icon icon-x ms-1"></i></span>
<span class="inline-flex items-center badge rounded-md text-xs font-medium bg-success text-white">Success <i class="icon icon-x ms-1"></i></span>
<span class="inline-flex items-center badge rounded-md text-xs font-medium bg-warning text-white">Warning <i class="icon icon-x ms-1"></i></span>
<span class="inline-flex items-center badge rounded-md text-xs font-medium bg-info text-white">Info <i class="icon icon-x ms-1"></i></span>
<span class="inline-flex items-center badge rounded-md text-xs font-medium bg-danger text-white">Error <i class="icon icon-x ms-1"></i></span>
</div>
Rounded Badge with Right Icon
Primary
Dark
Success
Warning
Info
Error
<div class="flex items-start flex-wrap gap-4">
<span class="inline-flex items-center badge rounded-full text-xs font-medium bg-primary text-white">Primary <i class="icon icon-x ms-1"></i></span>
<span class="inline-flex items-center badge rounded-full text-xs font-medium bg-dark text-white">Dark <i class="icon icon-x ms-1"></i></span>
<span class="inline-flex items-center badge rounded-full text-xs font-medium bg-success text-white">Success <i class="icon icon-x ms-1"></i></span>
<span class="inline-flex items-center badge rounded-full text-xs font-medium bg-warning text-white">Warning <i class="icon icon-x ms-1"></i></span>
<span class="inline-flex items-center badge rounded-full text-xs font-medium bg-info text-white">Info <i class="icon icon-x ms-1"></i></span>
<span class="inline-flex items-center badge rounded-full text-xs font-medium bg-danger text-white">Error <i class="icon icon-x ms-1"></i></span>
</div>
Ghost Badge Flat with Right Icon
Primary
Dark
Success
Warning
Info
Error
<div class="flex items-start flex-wrap gap-4">
<span class="inline-flex items-center badge rounded-lg text-xs font-medium bg-primary-50 text-primary border border-primary">Primary <i class="icon icon-x ms-1"></i></span>
<span class="inline-flex items-center badge rounded-lg text-xs font-medium bg-light text-dark border border-border-color">Dark <i class="icon icon-x ms-1"></i></span>
<span class="inline-flex items-center badge rounded-lg text-xs font-medium bg-success-50 text-success border border-success">Success <i class="icon icon-x ms-1"></i></span>
<span class="inline-flex items-center badge rounded-lg text-xs font-medium bg-warning-50 text-warning border border-warning">Warning <i class="icon icon-x ms-1"></i></span>
<span class="inline-flex items-center badge rounded-lg text-xs font-medium bg-info-50 text-info border border-info">Info <i class="icon icon-x ms-1"></i></span>
<span class="inline-flex items-center badge rounded-lg text-xs font-medium bg-danger-50 text-danger border border-danger">Error <i class="icon icon-x ms-1"></i></span>
</div>
Ghost Badge Rounded with Right Icon
Primary
Dark
Success
Warning
Info
Error
<div class="flex items-start flex-wrap gap-4">
<span class="inline-flex items-center badge rounded-full text-xs font-medium bg-primary-50 text-primary border border-primary">Primary <i class="icon icon-x ms-1"></i></span>
<span class="inline-flex items-center badge rounded-full text-xs font-medium bg-light text-dark border border-border-color">Dark <i class="icon icon-x ms-1"></i></span>
<span class="inline-flex items-center badge rounded-full text-xs font-medium bg-success-50 text-success border border-success">Success <i class="icon icon-x ms-1"></i></span>
<span class="inline-flex items-center badge rounded-full text-xs font-medium bg-warning-50 text-warning border border-warning">Warning <i class="icon icon-x ms-1"></i></span>
<span class="inline-flex items-center badge rounded-full text-xs font-medium bg-info-50 text-info border border-info">Info <i class="icon icon-x ms-1"></i></span>
<span class="inline-flex items-center badge rounded-full text-xs font-medium bg-danger-50 text-danger border border-danger">Error <i class="icon icon-x ms-1"></i></span>
</div>
Default Badge with Dot
Primary
Dark
Success
Warning
Info
Error
<div class="flex items-start flex-wrap gap-4">
<span class="inline-flex items-center badge rounded-md text-xs font-medium bg-primary text-white"><span class="bg-white w-1.5 h-1.5 block rounded-full me-1"></span> Primary</span>
<span class="inline-flex items-center badge rounded-md text-xs font-medium bg-dark text-white"><span class="bg-white w-1.5 h-1.5 block rounded-full me-1"></span> Dark</span>
<span class="inline-flex items-center badge rounded-md text-xs font-medium bg-success text-white"><span class="bg-white w-1.5 h-1.5 block rounded-full me-1"></span> Success</span>
<span class="inline-flex items-center badge rounded-md text-xs font-medium bg-warning text-white"><span class="bg-white w-1.5 h-1.5 block rounded-full me-1"></span> Warning</span>
<span class="inline-flex items-center badge rounded-md text-xs font-medium bg-info text-white"><span class="bg-white w-1.5 h-1.5 block rounded-full me-1"></span> Info</span>
<span class="inline-flex items-center badge rounded-md text-xs font-medium bg-danger text-white"><span class="bg-white w-1.5 h-1.5 block rounded-full me-1"></span> Error</span>
</div>
Rounded Badge with Dot
Primary
Dark
Success
Warning
Info
Error
<div class="flex items-start flex-wrap gap-4">
<span class="inline-flex items-center badge rounded-full text-xs font-medium bg-primary text-white"><span class="bg-white w-1.5 h-1.5 block rounded-full me-1"></span> Primary</span>
<span class="inline-flex items-center badge rounded-full text-xs font-medium bg-dark text-white"><span class="bg-white w-1.5 h-1.5 block rounded-full me-1"></span> Dark</span>
<span class="inline-flex items-center badge rounded-full text-xs font-medium bg-success text-white"><span class="bg-white w-1.5 h-1.5 block rounded-full me-1"></span> Success</span>
<span class="inline-flex items-center badge rounded-full text-xs font-medium bg-warning text-white"><span class="bg-white w-1.5 h-1.5 block rounded-full me-1"></span> Warning</span>
<span class="inline-flex items-center badge rounded-full text-xs font-medium bg-info text-white"><span class="bg-white w-1.5 h-1.5 block rounded-full me-1"></span> Info</span>
<span class="inline-flex items-center badge rounded-full text-xs font-medium bg-danger text-white"><span class="bg-white w-1.5 h-1.5 block rounded-full me-1"></span> Error</span>
</div>
Ghost Badge Flat with Dot
Primary
Dark
Success
Warning
Info
Error
<div class="flex items-start flex-wrap gap-4">
<span class="inline-flex items-center badge rounded-lg text-xs font-medium bg-primary-50 text-primary border border-primary"><span class="bg-primary w-1.5 h-1.5 block rounded-full me-1"></span> Primary</span>
<span class="inline-flex items-center badge rounded-lg text-xs font-medium bg-light text-dark border border-border-color"><span class="bg-dark w-1.5 h-1.5 block rounded-full me-1"></span> Dark</span>
<span class="inline-flex items-center badge rounded-lg text-xs font-medium bg-success-50 text-success border border-success"><span class="bg-success w-1.5 h-1.5 block rounded-full me-1"></span> Success</span>
<span class="inline-flex items-center badge rounded-lg text-xs font-medium bg-warning-50 text-warning border border-warning"><span class="bg-warning w-1.5 h-1.5 block rounded-full me-1"></span> Warning</span>
<span class="inline-flex items-center badge rounded-lg text-xs font-medium bg-info-50 text-info border border-info"><span class="bg-info w-1.5 h-1.5 block rounded-full me-1"></span> Info</span>
<span class="inline-flex items-center badge rounded-lg text-xs font-medium bg-danger-50 text-danger border border-danger"><span class="bg-danger w-1.5 h-1.5 block rounded-full me-1"></span> Error</span>
</div>
Ghost Badge Rounded with Dot
Primary
Dark
Success
Warning
Info
Error
<div class="flex items-start flex-wrap gap-4">
<span class="inline-flex items-center badge rounded-full text-xs font-medium bg-primary-50 text-primary border border-primary"><span class="bg-primary w-1.5 h-1.5 block rounded-full me-1"></span> Primary</span>
<span class="inline-flex items-center badge rounded-full text-xs font-medium bg-light text-dark border border-border-color"><span class="bg-dark w-1.5 h-1.5 block rounded-full me-1"></span> Dark</span>
<span class="inline-flex items-center badge rounded-full text-xs font-medium bg-success-50 text-success border border-success"><span class="bg-success w-1.5 h-1.5 block rounded-full me-1"></span> Success</span>
<span class="inline-flex items-center badge rounded-full text-xs font-medium bg-warning-50 text-warning border border-warning"><span class="bg-warning w-1.5 h-1.5 block rounded-full me-1"></span> Warning</span>
<span class="inline-flex items-center badge rounded-full text-xs font-medium bg-info-50 text-info border border-info"><span class="bg-info w-1.5 h-1.5 block rounded-full me-1"></span> Info</span>
<span class="inline-flex items-center badge rounded-full text-xs font-medium bg-danger-50 text-danger border border-danger"><span class="bg-danger w-1.5 h-1.5 block rounded-full me-1"></span> Error</span>
</div>
Default Badge with Image
Primary
Dark
Success
Warning
Info
Error
<div class="flex items-start flex-wrap gap-4">
<span class="inline-flex items-center badge rounded-md text-xs font-medium bg-primary text-white"><img src="assets/img/avatar/avatar-01.jpg" class="w-3 h-3 me-1 rounded-xs" alt="avatar"> Primary</span>
<span class="inline-flex items-center badge rounded-md text-xs font-medium bg-dark text-white"><img src="assets/img/avatar/avatar-01.jpg" class="w-3 h-3 me-1 rounded-xs" alt="avatar"> Dark</span>
<span class="inline-flex items-center badge rounded-md text-xs font-medium bg-success text-white"><img src="assets/img/avatar/avatar-01.jpg" class="w-3 h-3 me-1 rounded-xs" alt="avatar"> Success</span>
<span class="inline-flex items-center badge rounded-md text-xs font-medium bg-warning text-white"><img src="assets/img/avatar/avatar-01.jpg" class="w-3 h-3 me-1 rounded-xs" alt="avatar"> Warning</span>
<span class="inline-flex items-center badge rounded-md text-xs font-medium bg-info text-white"><img src="assets/img/avatar/avatar-01.jpg" class="w-3 h-3 me-1 rounded-xs" alt="avatar"> Info</span>
<span class="inline-flex items-center badge rounded-md text-xs font-medium bg-danger text-white"><img src="assets/img/avatar/avatar-01.jpg" class="w-3 h-3 me-1 rounded-xs" alt="avatar"> Error</span>
</div>
Rounded Badge with Image
Primary
Dark
Success
Warning
Info
Error
<div class="flex items-start flex-wrap gap-4">
<span class="inline-flex items-center badge rounded-full text-xs font-medium bg-primary text-white"><img src="assets/img/avatar/avatar-01.jpg" class="w-3 h-3 me-1 rounded-full" alt="avatar"> Primary</span>
<span class="inline-flex items-center badge rounded-full text-xs font-medium bg-dark text-white"><img src="assets/img/avatar/avatar-01.jpg" class="w-3 h-3 me-1 rounded-full" alt="avatar"> Dark</span>
<span class="inline-flex items-center badge rounded-full text-xs font-medium bg-success text-white"><img src="assets/img/avatar/avatar-01.jpg" class="w-3 h-3 me-1 rounded-full" alt="avatar"> Success</span>
<span class="inline-flex items-center badge rounded-full text-xs font-medium bg-warning text-white"><img src="assets/img/avatar/avatar-01.jpg" class="w-3 h-3 me-1 rounded-full" alt="avatar"> Warning</span>
<span class="inline-flex items-center badge rounded-full text-xs font-medium bg-info text-white"><img src="assets/img/avatar/avatar-01.jpg" class="w-3 h-3 me-1 rounded-full" alt="avatar"> Info</span>
<span class="inline-flex items-center badge rounded-full text-xs font-medium bg-danger text-white"><img src="assets/img/avatar/avatar-01.jpg" class="w-3 h-3 me-1 rounded-full" alt="avatar"> Error</span>
</div>
Ghost Badge Flat with Image
Primary
Dark
Success
Warning
Info
Error
<div class="flex items-start flex-wrap gap-4">
<span class="inline-flex items-center badge rounded-lg text-xs font-medium bg-primary-50 text-primary border border-primary"><img src="assets/img/avatar/avatar-01.jpg" class="w-3 h-3 me-1 rounded-xs" alt="avatar"> Primary</span>
<span class="inline-flex items-center badge rounded-lg text-xs font-medium bg-light text-dark border border-border-color"><img src="assets/img/avatar/avatar-01.jpg" class="w-3 h-3 me-1 rounded-xs" alt="avatar"> Dark</span>
<span class="inline-flex items-center badge rounded-lg text-xs font-medium bg-success-50 text-success border border-success"><img src="assets/img/avatar/avatar-01.jpg" class="w-3 h-3 me-1 rounded-xs" alt="avatar"> Success</span>
<span class="inline-flex items-center badge rounded-lg text-xs font-medium bg-warning-50 text-warning border border-warning"><img src="assets/img/avatar/avatar-01.jpg" class="w-3 h-3 me-1 rounded-xs" alt="avatar"> Warning</span>
<span class="inline-flex items-center badge rounded-lg text-xs font-medium bg-info-50 text-info border border-info"><img src="assets/img/avatar/avatar-01.jpg" class="w-3 h-3 me-1 rounded-xs" alt="avatar"> Info</span>
<span class="inline-flex items-center badge rounded-lg text-xs font-medium bg-danger-50 text-danger border border-danger"><img src="assets/img/avatar/avatar-01.jpg" class="w-3 h-3 me-1 rounded-xs" alt="avatar"> Error</span>
</div>
Ghost Badge Rounded with Image
Primary
Dark
Success
Warning
Info
Error
<div class="flex items-start flex-wrap gap-4">
<span class="inline-flex items-center badge rounded-full text-xs font-medium bg-primary-50 text-primary border border-primary"><img src="assets/img/avatar/avatar-01.jpg" class="w-3 h-3 me-1 rounded-full" alt="avatar"> Primary</span>
<span class="inline-flex items-center badge rounded-full text-xs font-medium bg-light text-dark border border-border-color"><img src="assets/img/avatar/avatar-01.jpg" class="w-3 h-3 me-1 rounded-full" alt="avatar"> Dark</span>
<span class="inline-flex items-center badge rounded-full text-xs font-medium bg-success-50 text-success border border-success"><img src="assets/img/avatar/avatar-01.jpg" class="w-3 h-3 me-1 rounded-full" alt="avatar"> Success</span>
<span class="inline-flex items-center badge rounded-full text-xs font-medium bg-warning-50 text-warning border border-warning"><img src="assets/img/avatar/avatar-01.jpg" class="w-3 h-3 me-1 rounded-full" alt="avatar"> Warning</span>
<span class="inline-flex items-center badge rounded-full text-xs font-medium bg-info-50 text-info border border-info"><img src="assets/img/avatar/avatar-01.jpg" class="w-3 h-3 me-1 rounded-full" alt="avatar"> Info</span>
<span class="inline-flex items-center badge rounded-full text-xs font-medium bg-danger-50 text-danger border border-danger"><img src="assets/img/avatar/avatar-01.jpg" class="w-3 h-3 me-1 rounded-full" alt="avatar"> Error</span>
</div>
Default Badge with Image & Icon
Primary
Dark
Success
Warning
Info
Error
<div class="flex items-start flex-wrap gap-4">
<span class="inline-flex items-center badge rounded-md text-xs font-medium bg-primary text-white"><img src="assets/img/avatar/avatar-01.jpg" class="w-3 h-3 me-1 rounded-xs" alt="avatar"> Primary <i class="icon icon-x ms-1"></i></span>
<span class="inline-flex items-center badge rounded-md text-xs font-medium bg-dark text-white"><img src="assets/img/avatar/avatar-01.jpg" class="w-3 h-3 me-1 rounded-xs" alt="avatar"> Dark <i class="icon icon-x ms-1"></i></span>
<span class="inline-flex items-center badge rounded-md text-xs font-medium bg-success text-white"><img src="assets/img/avatar/avatar-01.jpg" class="w-3 h-3 me-1 rounded-xs" alt="avatar"> Success <i class="icon icon-x ms-1"></i></span>
<span class="inline-flex items-center badge rounded-md text-xs font-medium bg-warning text-white"><img src="assets/img/avatar/avatar-01.jpg" class="w-3 h-3 me-1 rounded-xs" alt="avatar"> Warning <i class="icon icon-x ms-1"></i></span>
<span class="inline-flex items-center badge rounded-md text-xs font-medium bg-info text-white"><img src="assets/img/avatar/avatar-01.jpg" class="w-3 h-3 me-1 rounded-xs" alt="avatar"> Info <i class="icon icon-x ms-1"></i></span>
<span class="inline-flex items-center badge rounded-md text-xs font-medium bg-danger text-white"><img src="assets/img/avatar/avatar-01.jpg" class="w-3 h-3 me-1 rounded-xs" alt="avatar"> Error <i class="icon icon-x ms-1"></i></span>
</div>
Rounded Badge with Image & Icon
Primary
Dark
Success
Warning
Info
Error
<div class="flex items-start flex-wrap gap-4">
<span class="inline-flex items-center badge rounded-full text-xs font-medium bg-primary text-white"><img src="assets/img/avatar/avatar-01.jpg" class="w-3 h-3 me-1 rounded-full" alt="avatar"> Primary <i class="icon icon-x ms-1"></i></span>
<span class="inline-flex items-center badge rounded-full text-xs font-medium bg-dark text-white"><img src="assets/img/avatar/avatar-01.jpg" class="w-3 h-3 me-1 rounded-full" alt="avatar"> Dark <i class="icon icon-x ms-1"></i></span>
<span class="inline-flex items-center badge rounded-full text-xs font-medium bg-success text-white"><img src="assets/img/avatar/avatar-01.jpg" class="w-3 h-3 me-1 rounded-full" alt="avatar"> Success <i class="icon icon-x ms-1"></i></span>
<span class="inline-flex items-center badge rounded-full text-xs font-medium bg-warning text-white"><img src="assets/img/avatar/avatar-01.jpg" class="w-3 h-3 me-1 rounded-full" alt="avatar"> Warning <i class="icon icon-x ms-1"></i></span>
<span class="inline-flex items-center badge rounded-full text-xs font-medium bg-info text-white"><img src="assets/img/avatar/avatar-01.jpg" class="w-3 h-3 me-1 rounded-full" alt="avatar"> Info <i class="icon icon-x ms-1"></i></span>
<span class="inline-flex items-center badge rounded-full text-xs font-medium bg-danger text-white"><img src="assets/img/avatar/avatar-01.jpg" class="w-3 h-3 me-1 rounded-full" alt="avatar"> Error <i class="icon icon-x ms-1"></i></span>
</div>
Ghost Badge Flat with Image & Icon
Primary
Dark
Success
Warning
Info
Error
<div class="flex items-start flex-wrap gap-4">
<span class="inline-flex items-center badge rounded-lg text-xs font-medium bg-primary-50 text-primary border border-primary"><img src="assets/img/avatar/avatar-01.jpg" class="w-3 h-3 me-1 rounded-xs" alt="avatar"> Primary <i class="icon icon-x ms-1"></i></span>
<span class="inline-flex items-center badge rounded-lg text-xs font-medium bg-light text-dark border border-border-color"><img src="assets/img/avatar/avatar-01.jpg" class="w-3 h-3 me-1 rounded-xs" alt="avatar"> Dark <i class="icon icon-x ms-1"></i></span>
<span class="inline-flex items-center badge rounded-lg text-xs font-medium bg-success-50 text-success border border-success"><img src="assets/img/avatar/avatar-01.jpg" class="w-3 h-3 me-1 rounded-xs" alt="avatar"> Success <i class="icon icon-x ms-1"></i></span>
<span class="inline-flex items-center badge rounded-lg text-xs font-medium bg-warning-50 text-warning border border-warning"><img src="assets/img/avatar/avatar-01.jpg" class="w-3 h-3 me-1 rounded-xs" alt="avatar"> Warning <i class="icon icon-x ms-1"></i></span>
<span class="inline-flex items-center badge rounded-lg text-xs font-medium bg-info-50 text-info border border-info"><img src="assets/img/avatar/avatar-01.jpg" class="w-3 h-3 me-1 rounded-xs" alt="avatar"> Info <i class="icon icon-x ms-1"></i></span>
<span class="inline-flex items-center badge rounded-lg text-xs font-medium bg-danger-50 text-danger border border-danger"><img src="assets/img/avatar/avatar-01.jpg" class="w-3 h-3 me-1 rounded-xs" alt="avatar"> Error <i class="icon icon-x ms-1"></i></span>
</div>
Ghost Badge Rounded with Image & Icon
Primary
Dark
Success
Warning
Info
Error
<div class="flex items-start flex-wrap gap-4">
<span class="inline-flex items-center badge rounded-full text-xs font-medium bg-primary-50 text-primary border border-primary"><img src="assets/img/avatar/avatar-01.jpg" class="w-3 h-3 me-1 rounded-full" alt="avatar"> Primary <i class="icon icon-x ms-1"></i></span>
<span class="inline-flex items-center badge rounded-full text-xs font-medium bg-light text-dark border border-border-color"><img src="assets/img/avatar/avatar-01.jpg" class="w-3 h-3 me-1 rounded-full" alt="avatar"> Dark <i class="icon icon-x ms-1"></i></span>
<span class="inline-flex items-center badge rounded-full text-xs font-medium bg-success-50 text-success border border-success"><img src="assets/img/avatar/avatar-01.jpg" class="w-3 h-3 me-1 rounded-full" alt="avatar"> Success <i class="icon icon-x ms-1"></i></span>
<span class="inline-flex items-center badge rounded-full text-xs font-medium bg-warning-50 text-warning border border-warning"><img src="assets/img/avatar/avatar-01.jpg" class="w-3 h-3 me-1 rounded-full" alt="avatar"> Warning <i class="icon icon-x ms-1"></i></span>
<span class="inline-flex items-center badge rounded-full text-xs font-medium bg-info-50 text-info border border-info"><img src="assets/img/avatar/avatar-01.jpg" class="w-3 h-3 me-1 rounded-full" alt="avatar"> Info <i class="icon icon-x ms-1"></i></span>
<span class="inline-flex items-center badge rounded-full text-xs font-medium bg-danger-50 text-danger border border-danger"><img src="assets/img/avatar/avatar-01.jpg" class="w-3 h-3 me-1 rounded-full" alt="avatar"> Error <i class="icon icon-x ms-1"></i></span>
</div>