LogoLogoLogo
ExecutiveReceptionDoctorNurseLaboratoryPharmacyBillingEmergency
/

No pages match “”.

Favorites5

All Patients
Appointments
Emergency
Billing
Laboratory

Recent

Pages you open appear here.

  • MAIN MENU
    • Dashboard
      • Dashboard
      • Executive Dashboard
      • Doctor Dashboard
      • Nurse Dashboard
      • Reception Dashboard
      • Laboratory Dashboard
      • Pharmacy Dashboard
      • Billing Dashboard
    • Applications
      • Chat
      • Calendar
      • Email
      • File Manager
      • Notes
      • To Do
    • Layouts
      • Mini Sidebar
      • Hidden Menu
      • Full Width
      • RTL
    • Patients
      • All Patients
      • Add Patient
      • Patient Profile
      • Admissions
      • Discharges
      • OPD Patients
      • IPD Patients
      • Patient Visits
      • Medical History
      • Patient Documents
      • Insurance Details
      • Family Members
      • Feedback
    • Doctors
      • All Doctors
      • Add Doctor
      • Doctor Profile
      • Specializations
      • Doctor Schedule
      • Availability
      • Leave Requests
      • Consultation Fees
    • Appointments
      • Appointment List
      • Calendar View
      • Book Appointment
      • Queue Management
      • Walk-in Patients
      • Follow-up Appointments
      • Appointment Requests
      • Cancelled Appointments
  • Clinical
    • Pharmacy
      • Pharmacy Dashboard
      • Medicines
      • Categories
      • Suppliers
      • Purchase Orders
      • Inventory
      • Prescriptions
      • Sales
      • Expiry Tracking
      • Stock Alerts
    • Laboratory
      • Laboratory Dashboard
      • Lab Tests
      • Test Categories
      • Test Requests
      • Sample Collection
      • Sample Tracking
      • Test Results
    • Emergency
      • Emergency Dashboard
      • Triage
      • Emergency Patients
      • Trauma Cases
      • Critical Care
    • Wards & Beds
      • Ward List
      • Bed Status
      • Bed Allocation
      • Bed Transfer
      • Occupancy
    • ICU
      • ICU Dashboard
      • ICU Patients
      • ICU Beds
      • Monitoring
      • Critical Alerts
    • Operation Theater
      • Surgery Schedule
      • OT Calendar
      • Surgeons
      • OT Booking
      • Operation Reports
    • Radiology
      • Radiology Dashboard
      • X-Ray
      • MRI
      • CT Scan
      • Ultrasound
      • Scan Requests
      • Reports
    • Blood Bank
      • Blood Inventory
      • Blood Donors
      • Blood Requests
      • Blood Issue
      • Blood Camps
    • Nursing
      • Nurse Dashboard
      • Nursing Notes
      • Vital Signs
      • Medication Administration
      • Care Plans
      • Shift Reports
  • Patient Care
    • Medical Records
      • EMR Dashboard
      • Medical History
      • Diagnoses
      • Prescriptions
      • Allergies
      • Progress Notes
      • Documents
    • Telemedicine
      • Video Consultations
      • Consultation History
      • Waiting Room
      • Scheduled Sessions
    • Diet & Nutrition
      • Diet Plans
      • Meal Planning
      • Nutrition Assessment
      • Dietician
  • Management
    • Billing
      • Billing Dashboard
      • Invoices
      • Payments
      • Estimates
      • Refunds
      • Discounts
      • Tax Settings
    • Insurance
      • Insurance Providers
      • Claims
      • Pre-Authorization
      • Approvals
      • Reimbursements
    • HR & Staff
      • Employees
      • Attendance
      • Leave Management
      • Payroll
      • Departments
      • Designations
      • Shifts
      • Recruitment
      • Performance
    • Inventory
      • Inventory Dashboard
      • Products
      • Categories
      • Suppliers
      • Purchase Orders
      • Stock In
      • Stock Out
      • Transfers
      • Asset Tracking
      • Low Stock
    • Ambulance
      • Ambulance Dashboard
      • Vehicles
      • Drivers
      • Emergency Calls
      • Trips
      • Maintenance
    • Finance
      • Income
      • Expenses
      • Transactions
      • Accounts
      • Bank Accounts
      • Profit & Loss
    • Administration
      • Branches
      • Departments
      • Notice Board
      • Announcements
      • Visitors
      • Complaints
    • Assets
      • Equipment
      • Maintenance
      • Repairs
      • Vendors
      • Asset Categories
  • System
    • Reports
      • Dashboard
      • Patient Reports
      • Appointment Reports
      • Revenue Reports
      • Pharmacy Reports
      • Laboratory Reports
      • Doctor Performance
      • Bed Occupancy
      • Inventory Reports
      • HR Reports
    • Notifications
    • Activity Logs
    • Audit Logs
    • User Mgmt
    • Roles
    • Permissions
    • Backup & Restore
    • Email Templates
    • SMS Templates
    • Settings
  • Authentication
    • Login
    • Register
    • Forgot Password
    • OTP
    • Reset Password
    • Lock Screen
    • Two-Factor Authentication
    • Session Expired
  • ERROR PAGES
    • Error 401
    • Error 403
    • Error 404
    • Error 429
    • Error 500
    • Error 503
    • Maintenance
    • Coming Soon
    • Offline
  • GENERAL PAGES
    • Profile
    • My Account
    • Activity
    • Gallery
    • Help Center
    • Knowledge Base
    • Support Tickets
    • Contact Us
    • Search Results
    • Pricing
    • FAQ
    • Coming Soon
    • Maintenance
    • Privacy Policy
    • Terms & Conditions
    • Starter Page
  • UI INTERFACE
    • Base UI
      • Alerts
      • Accordion
      • Avatar
      • Badges
      • Buttons
      • Button Group
      • Breadcrumb
      • Card
      • Colors
      • Collapse
      • Dropdowns
      • Grid
      • Images
      • Modals
      • Offcanvas
      • Pagination
      • Popovers
      • Progress
      • Tabs
      • Typography
    • Advanced UI
      • Dragula
      • Clipboard
      • Range Slider
      • Lightbox
    • Forms
      • Form Elements
      • Select2
      • Form Editor
      • Form Picker
    • Tables
      • Basic Tables
      • Data Table
    • Charts
      • Apex Charts
      • Chart Js
    • Icons
      • Fontawesome Icons
      • Tabler Icons
      • Lucide
      • Phosphor

Hospital Online

81% load

All systems operational · 3 campuses

HelpSupportLogout

Dreams HMS · v1.0.0 Enterprise

logosmall logodark logo
⌘K
Recent searches

No recent searches yet.

Suggestions
PatientsDirectory & registrationAppointmentsToday's scheduleLab resultsPending verificationInvoicesBilling & claimsBed availabilityLive ward map
Emergency
Quick actions
New PatientNew AppointmentEmergency CaseLab RequestDispense MedicineCreate Invoice

Dreams AI

Hospital operations copilot

Ask anything or pick a smart shortcut below.

Language
Appearance

System follows your device preference automatically.

Notification Center

Live across all departments

New patient registered

5 min

John Doe · registered by Secretary M

ClinicalView

Emergency case admitted

11 min

Room 30 · ICU bed assigned

CriticalRespond

Surgery completed

15 min

Operation theatre 2 now clear

ClinicalView

Pharmacy stock alert

22 min

Critical supplies running low

HighReorder

Lab report ready

36 min

PID 102 · blood sample results

ClinicalOpen

Ambulance dispatched

2 hrs

Unit 048 · en route to Highway 2

SystemTrack
View all notifications
Angela Merkel

Angela Merkel

Chief Physician

Shift

Day · 8–5

Dept

Cardiology

On duty · 12 patients today · last active now
My ProfileReportsNotificationsSettings
Logout
Esc

Navigation

Executive Dashboard
Doctor Dashboard
Nurse Dashboard
Reception Dashboard
Laboratory Dashboard
Pharmacy Dashboard
Billing Dashboard

Actions

Register new patient
Book an appointment
Open emergency case
Create lab request
Dispatch ambulance

Records

Patients directory
Doctors directory
Ward & bed status
Medical records

Settings

Open settings
My profile
↑↓navigateEnterselectDreams AI Command

Activity Stream

Hospital-wide · last 24h

New patient John Doe registered at reception

just now

Emergency case admitted to ICU bed 30

6 min ago

Lab report PID-102 verified and released

14 min ago

Pharmacy dispensed 24 prescriptions this hour

28 min ago

Invoice INV-9209 settled — $260 card payment

40 min ago

Surgery completed — theatre 2 now clear

1 hr ago

Ambulance unit 048 dispatched to Highway 2

2 hrs ago

Badges

Small count and labeling components for indicating status.

Default Badge

PrimaryDarkSuccessWarningInfoError
	

	
	<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

PrimaryDarkSuccessWarningInfoError
	

	
	<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

PrimaryDarkSuccessWarningInfoError
	

	
	<div class="flex items-start flex-wrap gap-4">
		<span class="badge rounded-lg text-xs font-medium bg-primary-transparent 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-transparent text-success border border-success">Success</span>
		<span class="badge rounded-lg text-xs font-medium bg-warning-transparent text-warning border border-warning">Warning</span>
		<span class="badge rounded-lg text-xs font-medium bg-info-transparent text-info border border-info">Info</span>
		<span class="badge rounded-lg text-xs font-medium bg-danger-transparent text-danger border border-danger">Error</span>
	</div>
Ghost Badge Rounded
PrimaryDarkSuccessWarningInfoError
	

	
	<div class="flex items-start flex-wrap gap-4">
		<span class="badge rounded-full text-xs font-medium bg-primary-transparent 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-transparent text-success border border-success">Success</span>
		<span class="badge rounded-full text-xs font-medium bg-warning-transparent text-warning border border-warning">Warning</span>
		<span class="badge rounded-full text-xs font-medium bg-info-transparent text-info border border-info">Info</span>
		<span class="badge rounded-full text-xs font-medium bg-danger-transparent text-danger border border-danger">Error</span>
	</div>
Default Badge Sizes
PrimaryDarkSuccessWarningInfoError
PrimaryDarkSuccessWarningInfoError
	

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

	
	<div class="flex items-start flex-wrap justify-between mb-5">
		<span class="badge-small rounded-md text-xs font-medium bg-primary-transparent 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-transparent text-success border border-success">Success</span>
		<span class="badge-small rounded-md text-xs font-medium bg-warning-transparent text-warning border border-warning">Warning</span>
		<span class="badge-small rounded-md text-xs font-medium bg-info-transparent text-info border border-info">Info</span>
		<span class="badge-small rounded-md text-xs font-medium bg-danger-transparent 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-transparent 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-transparent text-success border border-success">Success</span>
		<span class="badge rounded-lg text-xs font-medium bg-warning-transparent text-warning border border-warning">Warning</span>
		<span class="badge rounded-lg text-xs font-medium bg-info-transparent text-info border border-info">Info</span>
		<span class="badge rounded-lg text-xs font-medium bg-danger-transparent 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-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-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-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-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-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-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-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-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-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-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-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-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-transparent text-primary border border-primary"><i class="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-check me-1"></i> Dark</span> 
		<span class="inline-flex items-center badge rounded-lg text-xs font-medium bg-success-transparent text-success border border-success"><i class="icon-check me-1"></i> Success</span>
		<span class="inline-flex items-center badge rounded-lg text-xs font-medium bg-warning-transparent text-warning border border-warning"><i class="icon-check me-1"></i> Warning</span>
		<span class="inline-flex items-center badge rounded-lg text-xs font-medium bg-info-transparent text-info border border-info"><i class="icon-check me-1"></i> Info</span>
		<span class="inline-flex items-center badge rounded-lg text-xs font-medium bg-danger-transparent text-danger border border-danger"><i class="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-transparent text-primary border border-primary"><i class="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-check me-1"></i> Dark</span> 
		<span class="inline-flex items-center badge rounded-full text-xs font-medium bg-success-transparent text-success border border-success"><i class="icon-check me-1"></i> Success</span>
		<span class="inline-flex items-center badge rounded-full text-xs font-medium bg-warning-transparent text-warning border border-warning"><i class="icon-check me-1"></i> Warning</span>
		<span class="inline-flex items-center badge rounded-full text-xs font-medium bg-info-transparent text-info border border-info"><i class="icon-check me-1"></i> Info</span>
		<span class="inline-flex items-center badge rounded-full text-xs font-medium bg-danger-transparent text-danger border border-danger"><i class="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-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-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-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-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-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-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-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-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-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-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-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-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-transparent text-primary border border-primary">Primary <i class="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-x ms-1"></i></span> 
		<span class="inline-flex items-center badge rounded-lg text-xs font-medium bg-success-transparent text-success border border-success">Success <i class="icon-x ms-1"></i></span>
		<span class="inline-flex items-center badge rounded-lg text-xs font-medium bg-warning-transparent text-warning border border-warning">Warning <i class="icon-x ms-1"></i></span>
		<span class="inline-flex items-center badge rounded-lg text-xs font-medium bg-info-transparent text-info border border-info">Info <i class="icon-x ms-1"></i></span>
		<span class="inline-flex items-center badge rounded-lg text-xs font-medium bg-danger-transparent text-danger border border-danger">Error <i class="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-transparent text-primary border border-primary">Primary <i class="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-x ms-1"></i></span> 
		<span class="inline-flex items-center badge rounded-full text-xs font-medium bg-success-transparent text-success border border-success">Success <i class="icon-x ms-1"></i></span>
		<span class="inline-flex items-center badge rounded-full text-xs font-medium bg-warning-transparent text-warning border border-warning">Warning <i class="icon-x ms-1"></i></span>
		<span class="inline-flex items-center badge rounded-full text-xs font-medium bg-info-transparent text-info border border-info">Info <i class="icon-x ms-1"></i></span>
		<span class="inline-flex items-center badge rounded-full text-xs font-medium bg-danger-transparent text-danger border border-danger">Error <i class="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 dark:bg-dark-white"></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 dark:bg-dark-white"></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 dark:bg-dark-white"></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 dark:bg-dark-white"></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 dark:bg-dark-white"></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 dark:bg-dark-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-white w-1.5 h-1.5 block rounded-full me-1 dark:bg-dark-white"></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 dark:bg-dark-white"></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 dark:bg-dark-white"></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 dark:bg-dark-white"></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 dark:bg-dark-white"></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 dark:bg-dark-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 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-transparent 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-transparent 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-transparent 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-transparent 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-transparent 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-transparent 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-transparent 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-transparent 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-transparent 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
avatar Primaryavatar Darkavatar Successavatar Warningavatar Infoavatar 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
avatar Primaryavatar Darkavatar Successavatar Warningavatar Infoavatar 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
avatar Primaryavatar Darkavatar Successavatar Warningavatar Infoavatar 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 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-transparent 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-transparent 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-transparent 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-transparent 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
avatar Primaryavatar Darkavatar Successavatar Warningavatar Infoavatar 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 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-transparent 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-transparent 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-transparent 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-transparent 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
avatar Primary avatar Dark avatar Success avatar Warning avatar Info avatar 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-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-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-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-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-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-x ms-1"></i></span>
	</div>
Rounded Badge with Image & Icon
avatar Primary avatar Dark avatar Success avatar Warning avatar Info avatar 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-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-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-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-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-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-x ms-1"></i></span>
	</div>
Ghost Badge Flat with Image & Icon
avatar Primary avatar Dark avatar Success avatar Warning avatar Info avatar 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 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-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-x ms-1"></i></span>
		<span class="inline-flex items-center badge rounded-lg text-xs font-medium bg-success-transparent 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-x ms-1"></i></span>
		<span class="inline-flex items-center badge rounded-lg text-xs font-medium bg-warning-transparent 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-x ms-1"></i></span>
		<span class="inline-flex items-center badge rounded-lg text-xs font-medium bg-info-transparent 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-x ms-1"></i></span>
		<span class="inline-flex items-center badge rounded-lg text-xs font-medium bg-danger-transparent 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-x ms-1"></i></span>
	</div>
Ghost Badge Rounded with Image & Icon
avatar Primary avatar Dark avatar Success avatar Warning avatar Info avatar 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 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-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-x ms-1"></i></span>
		<span class="inline-flex items-center badge rounded-full text-xs font-medium bg-success-transparent 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-x ms-1"></i></span>
		<span class="inline-flex items-center badge rounded-full text-xs font-medium bg-warning-transparent 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-x ms-1"></i></span>
		<span class="inline-flex items-center badge rounded-full text-xs font-medium bg-info-transparent 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-x ms-1"></i></span>
		<span class="inline-flex items-center badge rounded-full text-xs font-medium bg-danger-transparent 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-x ms-1"></i></span>
	</div>