-
-
-
Notifications
Check all -
-
Edwin Day30 mins ago
Marked the bug analysis task as done
-
Ralph Waters45 mins ago
New bugs added for designer
-
-
-
-
-
Cart
Check all 
Mi Watch Revolve
$ 10.00
Ulrich Duffel Bag
$140.00
Tree Stylish Pot
$ 840.00
-
Total
$ 990.00
- Proceed to checkout
-
-
-
Messages
Send a new message -
online
-
warning
-
online
-
-
Helen Walter
Admin
Badge
ADMIN PANELTemplate badge
You can use badge by adding class .badge
Primary
Secondary
Info
Success
Warning
Danger
Light
<div class="text-white rounded-full badge bg-primary">Primary</div>
<div class="text-white rounded-full badge bg-secondary">Secondary</div>
<div class="text-white rounded-full badge bg-info">Info</div>
<div class="text-white rounded-full badge bg-success">Success</div>
<div class="text-white rounded-full badge bg-warning">Warning</div>
<div class="text-white rounded-full badge bg-danger">Danger</div>
<div class="rounded-full badge bg-light text-dark">Light</div>
Rounded badge
You can use rounded badge by adding class .rounded
Primary
Secondary
Info
Success
Warning
Danger
Light
<div class="text-white rounded badge bg-primary">Primary</div>
<div class="text-white rounded badge bg-secondary">Secondary</div>
<div class="text-white rounded badge bg-info">Info</div>
<div class="text-white rounded badge bg-success">Success</div>
<div class="text-white rounded badge bg-warning">Warning</div>
<div class="text-white rounded badge bg-danger">Danger</div>
<div class="rounded badge bg-light text-dark">Light</div>
Outline badge
Use the .border class to set the Outlined badge.
Primary
Secondary
Info
Success
Warning
Danger
Light
<div class="badge badge-primary badge-outline rounded-5">
primary
</div>
<div class="badge badge-secondary badge-outline rounded-5">
secondary
</div>
<div class="badge badge-success badge-outline rounded-5">
success
</div>
<div class="badge badge-info badge-outline rounded-5">
info
</div>
<div class="badge badge-warning badge-outline rounded-5">
warning
</div>
<div class="badge badge-accent badge-outline rounded-5">
accent
</div>
Badge With Dots
Use .badge class to set dots with badge.
Primary
Secondary
Success
Warning
Danger
Light
<div class="flex flex-wrap gap-2">
<div class="flex flex-wrap items-center gap-2 text-white rounded-full badge bg-primary badge-md">;
<div class="w-1 h-1 bg-current rounded-full"></div>
<span class="leading-none"> Primary </span>
</div>
<div class="flex flex-wrap items-center gap-2 text-white rounded-full badge bg-secondary badge-md">
<div class="w-1 h-1 bg-current rounded-full"></div>
<span class="leading-none"> Secondary </span>
</div>
<div class="flex flex-wrap items-center gap-2 text-white rounded-full badge bg-nnfo badge-md">
<div class="w-1 h-1 bg-current rounded-full"></div>
<span class="leading-none"> Info </span>
</div>
<div class="flex flex-wrap items-center gap-2 text-white rounded-full badge bg-success badge-md">
<div class="w-1 h-1 bg-current rounded-full"></div>
<span class="leading-none"> Success </span>
</div>
<div class="flex flex-wrap items-center gap-2 text-white rounded-full badge bg-warning badge-md">
<div class="w-1 h-1 bg-current rounded-full"></div>
<span class="leading-none"> Warning </span>
</div>
<div class="flex flex-wrap items-center gap-2 text-white rounded-full badge bg-danger badge-md">
<div class="w-1 h-1 bg-current rounded-full"></div>
<span class="leading-none"> Danger </span>
</div>
<div class="flex flex-wrap items-center gap-2 rounded-full badge bg-light text-dark badge-md">
<div class="w-1 h-1 bg-current rounded-full"></div>
<span class="leading-none"> Light </span>
</div>
</div>
Badge size
You can customize badge size by adding class .badge-lg, .badge-md, .badge-sm, .badge-xs
Badge-lg
Badge-md
Badge-sm
Badge-xs
<div class="text-white rounded badge bg-primary badge-lg">Badge-lg</div>
<div class="text-white rounded badge bg-primary badge-md">Badge-ms</div>
<div class="text-white rounded badge bg-primary badge-sm">Badge-sm</div>
<div class="text-white rounded badge bg-primary badge-xs">Badge-xs</div>
Badge with Icon
Here is some badge with state colors
Warning
Remove
<div class="flex flex-wrap items-center gap-2 text-white rounded badge badge-md bg-warning">
+iconly('', 'Danger', 'text-[24px]', ['1','2'], 'path_formatter')
<span class="text-sm">Warning</span>
</div>
<div class="flex flex-wrap items-center gap-2 text-white rounded badge badge-md bg-danger">
<span class="text-sm">Remove</span>
+iconly('', 'Danger', 'text-[24px]', ['1','2'], 'path_formatter')
</div>
Badge in a button
Use the .badge & .btn class to set badge with button.
<div class="flex flex-wrap items-center gap-2">
<button class="flex flex-wrap items-center gap-2 text-white btn btn-info">Notification</button>
<span class="bg-white rounded badge badge-xs text-dark">+99</span>
<button class="flex flex-wrap items-center gap-2 text-white btn btn-secondary">Info</button>
<span class="bg-white rounded badge badge-xs text-dark">+50</span>
</div>
Badge with text
You the .badge class to set the badge With Text.
Here, the latest news News
click on, for new updateUpdate
<p class="flex items-center gap-2 text-sm"> Here, the latest news
<span class="rounded-full badge badge-xs bg-primary">News</span>
</p>
<p class="flex items-center gap-2 text-sm"> click on, for new update
<span class="rounded-full badge badge-sm bg-primary">Update</span>
</p>