Badges

PrimarySecondarySuccessDangerWarningInfoLightDark

{badges.map((idx) => 
(<span className={a&#768;badge bg-&#36;{idx.color}a&#769;}
 key={Math.random()}>{idx.class}</span>))}

Pill Badges

PrimarySecondarySuccessDangerWarningInfoLightDark

{badges.map((idx) =>
 (<span className={a&#768;badge !rounded-full bg-&#36;
{idx.color}a&#769;} key={Math.random()}>{idx.class}
</span>))}

Light Badges

PrimarySecondarySuccessDangerWarningInfoLightDark

<div className="box-body flex flex-wrap gap-2">
{lightbadges.map((idx) => 
(<span className={a&#768;badge bg-&#36;{idx.color}a&#769;}
 key={Math.random()}>{idx.class}</span>))}</div>

Light Pill Badges

PrimarySecondarySuccessDangerWarningInfoLightDark

<div className="box-body flex flex-wrap gap-2">
{lightbadges.map((idx) => (<span
 className={a&#768;badge !rounded-full bg-&#36;{idx.color}a&#769;}
  key={Math.random()}>{idx.class}</span>))}
</div>

Gradient Badges

PrimarySecondarySuccessDangerWarningInfoOrangePurple

<div className="box-body flex flex-wrap gap-2">
{gradientbadge.map((idx)=>(<span 
className={a&#768;badge bg-&#36;{idx.color}-gradienta&#769;} 
key={Math.random()}>{idx.class}</span>))}
</div>

Gradient Pill Badges

PrimarySecondarySuccessDangerWarningInfoOrangePurple

<div className="box-body flex flex-wrap gap-2">
{gradientbadge.map((idx)=>(<span className={a&#768;badge rounded-full
bg-&#36;{idx.color}-gradienta&#769;} key={Math.random()}>
{idx.class}</span>))}</div>

Outline Badges

PrimarySecondarySuccessDangerWarningInfoLightDark

<div className="box-body flex flex-wrap gap-2">
{outlinebadges.map((idx) => (
<span className={a&#768;badge bg-outline-&#36;{idx.color}a&#769;}
key={Math.random()}>{idx.class}</span>))}</div>

Outline Pill Badges

PrimarySecondarySuccessDangerWarningInfoLightDark

<div className="box-body flex flex-wrap gap-2">
{outlinebadges.map((idx) => (
<span className={a&#768;badge !rounded-full bg-outline-&#36;
{idx.color}a&#769;} key={Math.random()}>{idx.class}</span>))}
</div>

Button With Badges

<div className="box-body flex flex-wrap gap-2">
<button type="button" className="ti-btn bg-primary text-white my-1 me-2">
 Notifications <span className="badge ms-2 bg-secondary">4</span></button>
<button type="button" className="ti-btn bg-secondary text-white my-1 me-2"> 
Notifications <span className="badge ms-2 bg-primary">7</span></button>
<button type="button" className="ti-btn bg-success text-white my-1 me-2"> 
Notifications <span className="badge ms-2 bg-danger">12</span></button>
<button type="button" className="ti-btn bg-info text-white my-1 me-2"> 
Notifications <span className="badge ms-2 bg-warning">32</span>
</button>
</div>

Outline Button Badges

<div className="box-body flex flex-wrap gap-2">
<button type="button" className="ti-btn ti-btn-outline-primary my-1 me-2">
Notifications
<span className="badge bg-primary ms-2 text-white">4</span>
</button>
<button type="button" className="ti-btn ti-btn-outline-secondary my-1 me-2">
 Notifications <span className="badge bg-secondary ms-2 text-white">7</span>
 </button>
 <button type="button" className="ti-btn ti-btn-outline-success my-1 me-2">
 Notifications 
 <span className="badge bg-success ms-2 text-white">12</span>
 </button>
<button type="button" className="ti-btn ti-btn-outline-info my-1 me-2"> 
Notifications 
<span className="badge bg-info ms-2 text-white">32</span>
</button>
</div>

Headings

Example heading New

<div className="box-body">
<h1 className="text-[2.5rem]">Example heading 
<span className="badge bg-primary text-white">New</span>
</h1><h2 className="text-[2rem]">
Example heading
<span className="badge bg-primary text-white">New</span>
</h2><h3 className="text-[1.75rem]">Example heading 
<span className="badge bg-primary text-white">New</span></h3>
<h4 className="text-[1.5rem]">Example heading 
<span className="badge bg-primary text-white">New</span>
</h4><h5 className="text-[1.25rem]">Example heading 
<span className="badge bg-primary text-white">New</span>
</h5><h6 className="text-[1rem]">Example heading 
<span className="badge bg-primary text-white">New</span>
</h6>
</div>

Positioned Badges

1000+

<div className="box-body flex flex-wrap gap-4">
<button type="button" className="ti-btn bg-primary text-white relative">
Inbox
<spanclassName="absolute -top-2 start-[60%] translate-middle 
 badge !rounded-full bg-danger">99+<span className="hidden">
 unread messages</span></span></button>
 <button type="button" className="ti-btn bg-secondary text-white relative">
Profile<spanclassName="absolute -top-2 start-[80%] translate-middle 
p-2 bg-success border border-light !rounded-full">
<span className="hidden">New alerts</span></span>
</button><span className="avatar relative">
<img src="../../../assets/images/faces/2.jpg" alt="img" 
className="!rounded-md" />
<spanclassName="absolute -top-2 start-[80%] translate-middle 
p-1 bg-success border border-light !rounded-full">
<span className="hidden">New alerts</span>
</span>
</span>
<span className="avatar avatar-rounded relative">
<img src="../../../assets/images/faces/15.jpg" alt="img" />
<spanclassName="absolute -top-2 start-[80%] translate-middle 
p-1 bg-success border border-light !rounded-full">
<span className="hidden">New alerts</span>
</span>
</span>
<span className="avatar avatar-rounded relative">
<img src="../../../assets/images/faces/10.jpg" alt="img" />
<span className="absolute -top-2 start-[60%] translate-middle 
badge bg-secondary !rounded-full shadow-lg text-white">1000+
<span className="hidden">New alerts</span>
</span>
</span>
</div>

Positioned Badges

Hot

14

13.2k

Inbox32

<div className="box-body">
<div className="flex items-center gap-5 flex-wrap">
<div>
<span className="badge bg-outline-secondary !font-semibold 
!text-[.9375rem] inline-flex items-center">
<i className="ti ti-flame me-1"></i>
Hot</span>
</div>
<div>
<span className="relative">
<svg className="fill-textmuted dark:fill-textmuted/50 w-8 h-8 
text-[2rem]" xmlns="http://www.w3.org/2000/svg" height="24px" 
viewBox="0 0 24 24" width="24px" fill="#000000">
<path d="M12 22c1.1 0 2-.9 2-2h-4c0 1.1.89 2 2 
2zm6-6v-5c0-3.07-1.64-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5
 1.5v.68C7.63 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2z">
 </path>
 </svg>
 <span className="badge !rounded-full bg-success text-white absolute
  -end-2 top-0">14</span>
</span>
</div>
<div>
<span className="badge border dark:border-light bg-light
 text-defaulttextcolor font-semibold font-[.7rem]">
 <i className="fe fe-eye me-2 inline-block"></i>
 13.2k</span>
 </div>
 <div>
 <span className="text-badge relative">
 <span className="text text-lg">Inbox</span>
 <span className="badge !rounded-full bg-success 
 text-white">32</span>
 </span>
 </div>
 </div>
 </div>

Switcher

Search result of

Badge

Example heading New