The Badge component is used to display small pieces of information, such as status indicators, labels, or notification counts. It's useful for drawing attention to specific UI elements.
Badge
Secondary
Destructive
Outline
Verified
8
99
20+
<?php
use Lib\PHPXUI\Badge;
use Lib\PPIcons\BadgeCheck;
?>
<div class="flex flex-col items-center gap-2">
<div class="flex w-full flex-wrap gap-2">
<Badge>Badge</Badge>
<Badge variant="secondary">Secondary</Badge>
<Badge variant="destructive">Destructive</Badge>
<Badge variant="outline">Outline</Badge>
</div>
<div class="flex w-full flex-wrap gap-2">
<Badge variant="secondary" class="bg-blue-500 text-white dark:bg-blue-600">
<BadgeCheck />
Verified
</Badge>
<Badge class="h-5 min-w-5 rounded-full px-1 font-mono tabular-nums">8</Badge>
<Badge class="h-5 min-w-5 rounded-full px-1 font-mono tabular-nums" variant="destructive">99</Badge>
<Badge class="h-5 min-w-5 rounded-full px-1 font-mono tabular-nums" variant="outline">20+</Badge>
</div>
</div>
Installation
npm
npx phpxui add Badge
Usage
use Lib\PHPXUI\Badge<Badge variant="default | outline | secondary | destructive">Badge</Badge>