Badge Badge Badge
---
import { HeartIcon } from 'lucide-react';
---
<div class="flex items-center gap-2">
<!-- A standard badge -->
<span class="badge preset-filled-primary-500">Badge</span>
<!-- A badge + icon -->
<span class="badge preset-filled-primary-500">
<HeartIcon className="fill-current stroke-0" size={10} />
<span>Badge</span>
</span>
<!-- An icon badge -->
<span class="badge-icon preset-filled-primary-500">
<HeartIcon className="fill-current stroke-0" size={10} />
</span>
<!-- A badge dot -->
<span class="badge-dot preset-filled-primary-500"> Badge </span>
</div>Inline
Display badges inline within buttons or list items.
---
import { HeartIcon } from 'lucide-react';
---
<div class="flex flex-col items-center gap-4">
<btn class="btn btn-xs preset-tonal-primary">
<HeartIcon />
<span>Favorites</span>
<span class="badge preset-filled-primary-500">64</span>
</btn>
<btn class="btn btn-sm preset-tonal-primary">
<HeartIcon />
<span>Favorites</span>
<span class="badge preset-filled-primary-500">64</span>
</btn>
<btn class="btn btn-base preset-tonal-primary">
<HeartIcon />
<span>Favorites</span>
<span class="badge preset-filled-primary-500">64</span>
</btn>
<btn class="btn btn-lg preset-tonal-primary">
<HeartIcon />
<span>Favorites</span>
<span class="badge preset-filled-primary-500">64</span>
</btn>
<btn class="btn btn-xl preset-tonal-primary">
<HeartIcon />
<span>Favorites</span>
<span class="badge preset-filled-primary-500">64</span>
</btn>
</div>Overlapped
Create overlapping numeric or icon badge display.
Badge
10
---
import { HeartIcon } from 'lucide-react';
const imgSrc =
'https://images.unsplash.com/photo-1620122303020-87ec826cf70d?q=80&w=256&h=256&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D';
---
<div class="flex items-center gap-4">
<!-- A badge dot -->
<div class="relative inline-block">
<span class="badge-dot preset-filled-success-500 absolute right-1.5 top-1.5 z-10">Badge</span>
<img class="size-20 overflow-hidden rounded-full grayscale" src={imgSrc} alt="Avatar" />
</div>
<!-- A standard badge -->
<div class="relative inline-block">
<span class="badge preset-filled-warning-500 absolute right-0 top-0 z-10">10</span>
<img class="size-20 overflow-hidden rounded-full grayscale" src={imgSrc} alt="Avatar" />
</div>
<!-- An icon badge -->
<div class="relative inline-block">
<span class="badge-icon preset-filled-error-500 absolute right-0 top-0 z-10">
<HeartIcon className="fill-current stroke-0" />
</span>
<img class="size-20 overflow-hidden rounded-full grayscale" src={imgSrc} alt="Avatar" />
</div>
</div>Presets
Provides full support of Presets .
Badge Badge Badge
Badge Badge Badge
Badge Badge Badge
Badge Badge Badge
Badge Badge Badge
Badge Badge Badge
Badge Badge Badge
---
import { HeartIcon } from 'lucide-react';
---
<div class="space-y-4">
<div class="flex gap-4">
<span class="badge-icon preset-filled-primary-500"><HeartIcon className="fill-current stroke-0" /></span>
<span class="badge preset-filled-primary-500">Badge</span>
<span class="badge preset-tonal-primary">Badge</span>
<span class="badge preset-outlined-primary-500">Badge</span>
</div>
<div class="flex gap-4">
<span class="badge-icon preset-filled-secondary-500"><HeartIcon className="fill-current stroke-0" /></span>
<span class="badge preset-filled-secondary-500">Badge</span>
<span class="badge preset-tonal-secondary">Badge</span>
<span class="badge preset-outlined-secondary-500">Badge</span>
</div>
<div class="flex gap-4">
<span class="badge-icon preset-filled-tertiary-500"><HeartIcon className="fill-current stroke-0" /></span>
<span class="badge preset-filled-tertiary-500">Badge</span>
<span class="badge preset-tonal-tertiary">Badge</span>
<span class="badge preset-outlined-tertiary-500">Badge</span>
</div>
<div class="flex gap-4">
<span class="badge-icon preset-filled-success-500"><HeartIcon className="fill-current stroke-0" /></span>
<span class="badge preset-filled-success-500">Badge</span>
<span class="badge preset-tonal-success">Badge</span>
<span class="badge preset-outlined-success-500">Badge</span>
</div>
<div class="flex gap-4">
<span class="badge-icon preset-filled-warning-500"><HeartIcon className="fill-current stroke-0" /></span>
<span class="badge preset-filled-warning-500">Badge</span>
<span class="badge preset-tonal-warning">Badge</span>
<span class="badge preset-outlined-warning-500">Badge</span>
</div>
<div class="flex gap-4">
<span class="badge-icon preset-filled-error-500"><HeartIcon className="fill-current stroke-0" /></span>
<span class="badge preset-filled-error-500">Badge</span>
<span class="badge preset-tonal-error">Badge</span>
<span class="badge preset-outlined-error-500">Badge</span>
</div>
<div class="flex gap-4">
<span class="badge-icon preset-filled-surface-500"><HeartIcon className="fill-current stroke-0" /></span>
<span class="badge preset-filled-surface-500">Badge</span>
<span class="badge preset-tonal-surface">Badge</span>
<span class="badge preset-outlined-surface-500">Badge</span>
</div>
</div>