Badge
- Ui Elements
- Badge
Badges
PrimarySecondarySuccessDangerWarningInfoLightDark
{badges.map((idx) =>
(<span className={àbadge bg-${idx.color}á}
key={Math.random()}>{idx.class}</span>))}Pill Badges
PrimarySecondarySuccessDangerWarningInfoLightDark
{badges.map((idx) =>
(<span className={àbadge !rounded-full bg-$
{idx.color}á} key={Math.random()}>{idx.class}
</span>))}Light Badges
PrimarySecondarySuccessDangerWarningInfoLightDark
<div className="box-body flex flex-wrap gap-2">
{lightbadges.map((idx) =>
(<span className={àbadge bg-${idx.color}á}
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={àbadge !rounded-full bg-${idx.color}á}
key={Math.random()}>{idx.class}</span>))}
</div>Gradient Badges
PrimarySecondarySuccessDangerWarningInfoOrangePurple
<div className="box-body flex flex-wrap gap-2">
{gradientbadge.map((idx)=>(<span
className={àbadge bg-${idx.color}-gradientá}
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={àbadge rounded-full
bg-${idx.color}-gradientá} key={Math.random()}>
{idx.class}</span>))}</div>Outline Badges
PrimarySecondarySuccessDangerWarningInfoLightDark
<div className="box-body flex flex-wrap gap-2">
{outlinebadges.map((idx) => (
<span className={àbadge bg-outline-${idx.color}á}
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={àbadge !rounded-full bg-outline-$
{idx.color}á} 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
Example heading New
Example heading New
Example heading New
Example heading New
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
New alerts
New alerts
1000+New alerts<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>