Badge - Dreams GYM is a premium Tailwind CSS admin dashboard template

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-transparent c-gold border border-primary">Primary</span>
		<span class="badge rounded-lg text-xs font-medium bg-gray-transparent text-dark dark:text-white border border-[var(--border)]">Dark</span> 
		<span class="badge rounded-lg text-xs font-medium bg-success-transparent c-green border border-success">Success</span>
		<span class="badge rounded-lg text-xs font-medium bg-warning-transparent c-orange border border-warning">Warning</span>
		<span class="badge rounded-lg text-xs font-medium bg-info-transparent c-cyan border border-info">Info</span>
		<span class="badge rounded-lg text-xs font-medium bg-danger-transparent c-red 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-transparent c-gold border border-primary">Primary</span>
		<span class="badge rounded-full text-xs font-medium bg-[var(--surface)] text-dark dark:text-white border border-[var(--border)]">Dark</span> 
		<span class="badge rounded-full text-xs font-medium bg-success-transparent c-green border border-success">Success</span>
		<span class="badge rounded-full text-xs font-medium bg-warning-transparent c-orange border border-warning">Warning</span>
		<span class="badge rounded-full text-xs font-medium bg-info-transparent c-cyan border border-info">Info</span>
		<span class="badge rounded-full text-xs font-medium bg-danger-transparent c-red border border-danger">Error</span>
	</div>

Default Badge Sizes

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">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

	
	
	<div class="flex items-start flex-wrap justify-between mb-5">
		<span class="badge-small rounded-md text-xs font-medium bg-primary-transparent c-gold border border-primary">Primary</span>
		<span class="badge-small rounded-md text-xs font-medium bg-[var(--surface)] text-dark dark:text-white border border-[var(--border)]">Dark</span> 
		<span class="badge-small rounded-md text-xs font-medium bg-success-transparent c-green border border-success">Success</span>
		<span class="badge-small rounded-md text-xs font-medium bg-warning-transparent c-orange border border-warning">Warning</span>
		<span class="badge-small rounded-md text-xs font-medium bg-info-transparent c-cyan border border-info">Info</span>
		<span class="badge-small rounded-md text-xs font-medium bg-danger-transparent c-red 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-transparent c-gold border border-primary">Primary</span>
		<span class="badge rounded-lg text-xs font-medium bg-gray-transparent text-dark dark:text-white border border-[var(--border)]">Dark</span> 
		<span class="badge rounded-lg text-xs font-medium bg-success-transparent c-green border border-success">Success</span>
		<span class="badge rounded-lg text-xs font-medium bg-warning-transparent c-orange border border-warning">Warning</span>
		<span class="badge rounded-lg text-xs font-medium bg-info-transparent c-cyan border border-info">Info</span>
		<span class="badge rounded-lg text-xs font-medium bg-danger-transparent c-red 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 data-lucide="check" class="w-4 h-4 me-1"></i> Primary</span>
		<span class="inline-flex items-center badge rounded-md text-xs font-medium bg-dark text-white"><i data-lucide="check" class="w-4 h-4 me-1"></i> Dark</span> 
		<span class="inline-flex items-center badge rounded-md text-xs font-medium bg-success text-white"><i data-lucide="check" class="w-4 h-4 me-1"></i> Success</span>
		<span class="inline-flex items-center badge rounded-md text-xs font-medium bg-warning text-white"><i data-lucide="check" class="w-4 h-4 me-1"></i> Warning</span>
		<span class="inline-flex items-center badge rounded-md text-xs font-medium bg-info text-white"><i data-lucide="check" class="w-4 h-4 me-1"></i> Info</span>
		<span class="inline-flex items-center badge rounded-md text-xs font-medium bg-danger text-white"><i data-lucide="check" class="w-4 h-4 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 data-lucide="check" class="w-4 h-4 me-1"></i> Primary</span>
		<span class="inline-flex items-center badge rounded-full text-xs font-medium bg-dark text-white"><i data-lucide="check" class="w-4 h-4 me-1"></i> Dark</span> 
		<span class="inline-flex items-center badge rounded-full text-xs font-medium bg-success text-white"><i data-lucide="check" class="w-4 h-4 me-1"></i> Success</span>
		<span class="inline-flex items-center badge rounded-full text-xs font-medium bg-warning text-white"><i data-lucide="check" class="w-4 h-4 me-1"></i> Warning</span>
		<span class="inline-flex items-center badge rounded-full text-xs font-medium bg-info text-white"><i data-lucide="check" class="w-4 h-4 me-1"></i> Info</span>
		<span class="inline-flex items-center badge rounded-full text-xs font-medium bg-danger text-white"><i data-lucide="check" class="w-4 h-4 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-transparent c-gold border border-primary"><i data-lucide="check" class="w-4 h-4 me-1"></i> Primary</span>
		<span class="inline-flex items-center badge rounded-lg text-xs font-medium bg-gray-transparent text-dark dark:text-white border border-[var(--border)]"><i data-lucide="check" class="w-4 h-4 me-1"></i> Dark</span> 
		<span class="inline-flex items-center badge rounded-lg text-xs font-medium bg-success-transparent c-green border border-success"><i data-lucide="check" class="w-4 h-4 me-1"></i> Success</span>
		<span class="inline-flex items-center badge rounded-lg text-xs font-medium bg-warning-transparent c-orange border border-warning"><i data-lucide="check" class="w-4 h-4 me-1"></i> Warning</span>
		<span class="inline-flex items-center badge rounded-lg text-xs font-medium bg-info-transparent c-cyan border border-info"><i data-lucide="check" class="w-4 h-4 me-1"></i> Info</span>
		<span class="inline-flex items-center badge rounded-lg text-xs font-medium bg-danger-transparent c-red border border-danger"><i data-lucide="check" class="w-4 h-4 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-transparent c-gold border border-primary"><i data-lucide="check" class="w-4 h-4 me-1"></i> Primary</span>
		<span class="inline-flex items-center badge rounded-full text-xs font-medium bg-gray-transparent text-dark dark:text-white border border-[var(--border)]"><i data-lucide="check" class="w-4 h-4 me-1"></i> Dark</span> 
		<span class="inline-flex items-center badge rounded-full text-xs font-medium bg-success-transparent c-green border border-success"><i data-lucide="check" class="w-4 h-4 me-1"></i> Success</span>
		<span class="inline-flex items-center badge rounded-full text-xs font-medium bg-warning-transparent c-orange border border-warning"><i data-lucide="check" class="w-4 h-4 me-1"></i> Warning</span>
		<span class="inline-flex items-center badge rounded-full text-xs font-medium bg-info-transparent c-cyan border border-info"><i data-lucide="check" class="w-4 h-4 me-1"></i> Info</span>
		<span class="inline-flex items-center badge rounded-full text-xs font-medium bg-danger-transparent c-red border border-danger"><i data-lucide="check" class="w-4 h-4 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 data-lucide="x" class="w-4 h-4 ms-1"></i></span>
		<span class="inline-flex items-center badge rounded-md text-xs font-medium bg-dark text-white">Dark <i data-lucide="x" class="w-4 h-4 ms-1"></i></span> 
		<span class="inline-flex items-center badge rounded-md text-xs font-medium bg-success text-white">Success <i data-lucide="x" class="w-4 h-4 ms-1"></i></span>
		<span class="inline-flex items-center badge rounded-md text-xs font-medium bg-warning text-white">Warning <i data-lucide="x" class="w-4 h-4 ms-1"></i></span>
		<span class="inline-flex items-center badge rounded-md text-xs font-medium bg-info text-white">Info <i data-lucide="x" class="w-4 h-4 ms-1"></i></span>
		<span class="inline-flex items-center badge rounded-md text-xs font-medium bg-danger text-white">Error <i data-lucide="x" class="w-4 h-4 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 data-lucide="x" class="w-4 h-4 ms-1"></i></span>
		<span class="inline-flex items-center badge rounded-full text-xs font-medium bg-dark text-white">Dark <i data-lucide="x" class="w-4 h-4 ms-1"></i></span> 
		<span class="inline-flex items-center badge rounded-full text-xs font-medium bg-success text-white">Success <i data-lucide="x" class="w-4 h-4 ms-1"></i></span>
		<span class="inline-flex items-center badge rounded-full text-xs font-medium bg-warning text-white">Warning <i data-lucide="x" class="w-4 h-4 ms-1"></i></span>
		<span class="inline-flex items-center badge rounded-full text-xs font-medium bg-info text-white">Info <i data-lucide="x" class="w-4 h-4 ms-1"></i></span>
		<span class="inline-flex items-center badge rounded-full text-xs font-medium bg-danger text-white">Error <i data-lucide="x" class="w-4 h-4 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-transparent c-gold border border-primary">Primary <i data-lucide="x" class="w-4 h-4 ms-1"></i></span>
		<span class="inline-flex items-center badge rounded-lg text-xs font-medium bg-gray-transparent text-dark dark:text-white border border-[var(--border)]">Dark <i data-lucide="x" class="w-4 h-4 ms-1"></i></span> 
		<span class="inline-flex items-center badge rounded-lg text-xs font-medium bg-success-transparent c-green border border-success">Success <i data-lucide="x" class="w-4 h-4 ms-1"></i></span>
		<span class="inline-flex items-center badge rounded-lg text-xs font-medium bg-warning-transparent c-orange border border-warning">Warning <i data-lucide="x" class="w-4 h-4 ms-1"></i></span>
		<span class="inline-flex items-center badge rounded-lg text-xs font-medium bg-info-transparent c-cyan border border-info">Info <i data-lucide="x" class="w-4 h-4 ms-1"></i></span>
		<span class="inline-flex items-center badge rounded-lg text-xs font-medium bg-danger-transparent c-red border border-danger">Error <i data-lucide="x" class="w-4 h-4 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-transparent c-gold border border-primary">Primary <i data-lucide="x" class="w-4 h-4 ms-1"></i></span>
		<span class="inline-flex items-center badge rounded-full text-xs font-medium bg-gray-transparent text-dark dark:text-white border border-[var(--border)]">Dark <i data-lucide="x" class="w-4 h-4 ms-1"></i></span> 
		<span class="inline-flex items-center badge rounded-full text-xs font-medium bg-success-transparent c-green border border-success">Success <i data-lucide="x" class="w-4 h-4 ms-1"></i></span>
		<span class="inline-flex items-center badge rounded-full text-xs font-medium bg-warning-transparent c-orange border border-warning">Warning <i data-lucide="x" class="w-4 h-4 ms-1"></i></span>
		<span class="inline-flex items-center badge rounded-full text-xs font-medium bg-info-transparent c-cyan border border-info">Info <i data-lucide="x" class="w-4 h-4 ms-1"></i></span>
		<span class="inline-flex items-center badge rounded-full text-xs font-medium bg-danger-transparent c-red border border-danger">Error <i data-lucide="x" class="w-4 h-4 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-[var(--card)] w-1.5 h-1.5 block rounded-full me-1 dark:bg-[var(--surface)]-white"></span> Primary</span>
		<span class="inline-flex items-center badge rounded-md text-xs font-medium bg-dark text-white"><span class="bg-[var(--card)] w-1.5 h-1.5 block rounded-full me-1 dark:bg-[var(--surface)]-white"></span> Dark</span> 
		<span class="inline-flex items-center badge rounded-md text-xs font-medium bg-success text-white"><span class="bg-[var(--card)] w-1.5 h-1.5 block rounded-full me-1 dark:bg-[var(--surface)]-white"></span> Success</span>
		<span class="inline-flex items-center badge rounded-md text-xs font-medium bg-warning text-white"><span class="bg-[var(--card)] w-1.5 h-1.5 block rounded-full me-1 dark:bg-[var(--surface)]-white"></span> Warning</span>
		<span class="inline-flex items-center badge rounded-md text-xs font-medium bg-info text-white"><span class="bg-[var(--card)] w-1.5 h-1.5 block rounded-full me-1 dark:bg-[var(--surface)]-white"></span> Info</span>
		<span class="inline-flex items-center badge rounded-md text-xs font-medium bg-danger text-white"><span class="bg-[var(--card)] w-1.5 h-1.5 block rounded-full me-1 dark:bg-[var(--surface)]-white"></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-[var(--card)] w-1.5 h-1.5 block rounded-full me-1 dark:bg-[var(--surface)]-white"></span> Primary</span>
		<span class="inline-flex items-center badge rounded-full text-xs font-medium bg-dark text-white"><span class="bg-[var(--card)] w-1.5 h-1.5 block rounded-full me-1 dark:bg-[var(--surface)]-white"></span> Dark</span> 
		<span class="inline-flex items-center badge rounded-full text-xs font-medium bg-success text-white"><span class="bg-[var(--card)] w-1.5 h-1.5 block rounded-full me-1 dark:bg-[var(--surface)]-white"></span> Success</span>
		<span class="inline-flex items-center badge rounded-full text-xs font-medium bg-warning text-white"><span class="bg-[var(--card)] w-1.5 h-1.5 block rounded-full me-1 dark:bg-[var(--surface)]-white"></span> Warning</span>
		<span class="inline-flex items-center badge rounded-full text-xs font-medium bg-info text-white"><span class="bg-[var(--card)] w-1.5 h-1.5 block rounded-full me-1 dark:bg-[var(--surface)]-white"></span> Info</span>
		<span class="inline-flex items-center badge rounded-full text-xs font-medium bg-danger text-white"><span class="bg-[var(--card)] w-1.5 h-1.5 block rounded-full me-1 dark:bg-[var(--surface)]-white"></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-transparent c-gold 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-gray-transparent text-dark dark:text-white border border-[var(--border)]"><span class="bg-[var(--surface)] 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-transparent c-green 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-transparent c-orange 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-transparent c-cyan 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-transparent c-red 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-transparent c-gold 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-gray-transparent text-dark dark:text-white border border-[var(--border)]"><span class="bg-[var(--surface)] 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-transparent c-green 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-transparent c-orange 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-transparent c-cyan 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-transparent c-red 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/avatars/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/avatars/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/avatars/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/avatars/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/avatars/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/avatars/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/avatars/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/avatars/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/avatars/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/avatars/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/avatars/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/avatars/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-transparent c-gold border border-primary"><img src="assets/img/avatars/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-gray-transparent text-dark dark:text-white border border-[var(--border)]"><img src="assets/img/avatars/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-transparent c-green border border-success"><img src="assets/img/avatars/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-transparent c-orange border border-warning"><img src="assets/img/avatars/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-transparent c-cyan border border-info"><img src="assets/img/avatars/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-transparent c-red border border-danger"><img src="assets/img/avatars/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-transparent c-gold border border-primary"><img src="assets/img/avatars/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-gray-transparent text-dark dark:text-white border border-[var(--border)]"><img src="assets/img/avatars/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-transparent c-green border border-success"><img src="assets/img/avatars/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-transparent c-orange border border-warning"><img src="assets/img/avatars/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-transparent c-cyan border border-info"><img src="assets/img/avatars/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-transparent c-red border border-danger"><img src="assets/img/avatars/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/avatars/avatar-01.jpg" class="w-3 h-3 me-1 rounded-xs" alt="avatar"> Primary <i data-lucide="x" class="w-4 h-4 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/avatars/avatar-01.jpg" class="w-3 h-3 me-1 rounded-xs" alt="avatar"> Dark <i data-lucide="x" class="w-4 h-4 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/avatars/avatar-01.jpg" class="w-3 h-3 me-1 rounded-xs" alt="avatar"> Success <i data-lucide="x" class="w-4 h-4 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/avatars/avatar-01.jpg" class="w-3 h-3 me-1 rounded-xs" alt="avatar"> Warning <i data-lucide="x" class="w-4 h-4 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/avatars/avatar-01.jpg" class="w-3 h-3 me-1 rounded-xs" alt="avatar"> Info <i data-lucide="x" class="w-4 h-4 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/avatars/avatar-01.jpg" class="w-3 h-3 me-1 rounded-xs" alt="avatar"> Error <i data-lucide="x" class="w-4 h-4 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/avatars/avatar-01.jpg" class="w-3 h-3 me-1 rounded-full" alt="avatar"> Primary <i data-lucide="x" class="w-4 h-4 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/avatars/avatar-01.jpg" class="w-3 h-3 me-1 rounded-full" alt="avatar"> Dark <i data-lucide="x" class="w-4 h-4 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/avatars/avatar-01.jpg" class="w-3 h-3 me-1 rounded-full" alt="avatar"> Success <i data-lucide="x" class="w-4 h-4 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/avatars/avatar-01.jpg" class="w-3 h-3 me-1 rounded-full" alt="avatar"> Warning <i data-lucide="x" class="w-4 h-4 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/avatars/avatar-01.jpg" class="w-3 h-3 me-1 rounded-full" alt="avatar"> Info <i data-lucide="x" class="w-4 h-4 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/avatars/avatar-01.jpg" class="w-3 h-3 me-1 rounded-full" alt="avatar"> Error <i data-lucide="x" class="w-4 h-4 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-transparent c-gold border border-primary"><img src="assets/img/avatars/avatar-01.jpg" class="w-3 h-3 me-1 rounded-xs" alt="avatar"> Primary <i data-lucide="x" class="w-4 h-4 ms-1"></i></span>
		<span class="inline-flex items-center badge rounded-lg text-xs font-medium bg-gray-transparent text-dark dark:text-white border border-[var(--border)]"><img src="assets/img/avatars/avatar-01.jpg" class="w-3 h-3 me-1 rounded-xs" alt="avatar"> Dark <i data-lucide="x" class="w-4 h-4 ms-1"></i></span>
		<span class="inline-flex items-center badge rounded-lg text-xs font-medium bg-success-transparent c-green border border-success"><img src="assets/img/avatars/avatar-01.jpg" class="w-3 h-3 me-1 rounded-xs" alt="avatar"> Success <i data-lucide="x" class="w-4 h-4 ms-1"></i></span>
		<span class="inline-flex items-center badge rounded-lg text-xs font-medium bg-warning-transparent c-orange border border-warning"><img src="assets/img/avatars/avatar-01.jpg" class="w-3 h-3 me-1 rounded-xs" alt="avatar"> Warning <i data-lucide="x" class="w-4 h-4 ms-1"></i></span>
		<span class="inline-flex items-center badge rounded-lg text-xs font-medium bg-info-transparent c-cyan border border-info"><img src="assets/img/avatars/avatar-01.jpg" class="w-3 h-3 me-1 rounded-xs" alt="avatar"> Info <i data-lucide="x" class="w-4 h-4 ms-1"></i></span>
		<span class="inline-flex items-center badge rounded-lg text-xs font-medium bg-danger-transparent c-red border border-danger"><img src="assets/img/avatars/avatar-01.jpg" class="w-3 h-3 me-1 rounded-xs" alt="avatar"> Error <i data-lucide="x" class="w-4 h-4 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-transparent c-gold border border-primary"><img src="assets/img/avatars/avatar-01.jpg" class="w-3 h-3 me-1 rounded-full" alt="avatar"> Primary <i data-lucide="x" class="w-4 h-4 ms-1"></i></span>
		<span class="inline-flex items-center badge rounded-full text-xs font-medium bg-gray-transparent text-dark dark:text-white border border-[var(--border)]"><img src="assets/img/avatars/avatar-01.jpg" class="w-3 h-3 me-1 rounded-full" alt="avatar"> Dark <i data-lucide="x" class="w-4 h-4 ms-1"></i></span>
		<span class="inline-flex items-center badge rounded-full text-xs font-medium bg-success-transparent c-green border border-success"><img src="assets/img/avatars/avatar-01.jpg" class="w-3 h-3 me-1 rounded-full" alt="avatar"> Success <i data-lucide="x" class="w-4 h-4 ms-1"></i></span>
		<span class="inline-flex items-center badge rounded-full text-xs font-medium bg-warning-transparent c-orange border border-warning"><img src="assets/img/avatars/avatar-01.jpg" class="w-3 h-3 me-1 rounded-full" alt="avatar"> Warning <i data-lucide="x" class="w-4 h-4 ms-1"></i></span>
		<span class="inline-flex items-center badge rounded-full text-xs font-medium bg-info-transparent c-cyan border border-info"><img src="assets/img/avatars/avatar-01.jpg" class="w-3 h-3 me-1 rounded-full" alt="avatar"> Info <i data-lucide="x" class="w-4 h-4 ms-1"></i></span>
		<span class="inline-flex items-center badge rounded-full text-xs font-medium bg-danger-transparent c-red border border-danger"><img src="assets/img/avatars/avatar-01.jpg" class="w-3 h-3 me-1 rounded-full" alt="avatar"> Error <i data-lucide="x" class="w-4 h-4 ms-1"></i></span>
	</div>