Ngorei Doc
Ngorei Doc
Dokumentasi komponen Badges yang dapat digunakan dalam NexaUI framework.
Badge dapat digunakan untuk menampilkan notifikasi, status, atau label singkat.
<span class="nx-badge">Default</span>
<span class="nx-badge nx-primary">Primary</span>
// Contoh JavaScript
const badge = document.querySelector('.nx-badge');
.nx-badge {
display: inline-block;
padding: 0.25em 0.6em;
}
<Badge title="Default" class="nx-primary"/>
Tambahkan kelas nx-pill untuk membuat badge dengan sudut yang lebih bulat.
<span class="nx-badge nx-pill">Default</span>
<span class="nx-badge nx-primary nx-pill">Primary</span>
<span class="nx-badge nx-success nx-pill">Success</span>
<span class="nx-badge nx-warning nx-pill">Warning</span>
<span class="nx-badge nx-danger nx-pill">Danger</span>
<span class="nx-badge nx-info nx-pill">Info</span>
<Badge title="Default" class="nx-default"/>
<Badge title="Primary" class="nx-primary"/>
<Badge title="Success" class="nx-success"/>
<Badge title="Warning" class="nx-warning"/>
<Badge title="Danger" class="nx-danger"/>
<Badge title="Info" class="nx-info"/>
Badge dapat digunakan sebagai penanda notifikasi pada ikon atau teks.
Lihat perbandingan pada code badges pada HTML dengan NexaUI
<button class="nx-btn">
Pesan <span class="nx-badge nx-danger nx-pill">4</span>
</button>
<button class="nx-btn">
Notifikasi <span class="nx-badge nx-warning nx-pill">12</span>
</button>
<Badge
title="Pesan"
button="nx-btn"
value="4"
class="nx-danger nx-pill"/>
Gunakan kelas nx-badge-sm atau nx-badge-lg untuk mengubah ukuran badge.
<!-- Badge ukuran normal -->
<span class="nx-badge nx-primary nx-badge-sm">Small</span>
<span class="nx-badge nx-primary">Default</span>
<span class="nx-badge nx-primary nx-badge-lg">Large</span>
<!-- Badge pill dengan ukuran berbeda -->
<span class="nx-badge nx-success nx-pill nx-badge-sm">Small Pill</span>
<span class="nx-badge nx-success nx-pill">Default Pill</span>
<span class="nx-badge nx-success nx-pill nx-badge-lg">Large Pill</span>
<!-- Badge ukuran normal -->
<Badge title="Small" class="nx-primary nx-badge-sm"/>
<Badge title="Default" class="nx-primary"/>
<Badge title="Large" class="nx-primary nx-badge-lg"/>
<!-- Badge pill dengan ukuran berbeda -->
<Badge title="Small Pill" class="nx-success nx-pill nx-badge-sm"/>
<Badge title="Default Pill" class="nx-success nx-pill"/>
<Badge title="Large Pill" class="nx-success nx-pill nx-badge-lg"/>
Badge dapat dikombinasikan dengan ikon untuk tampilan yang lebih informatif.
<span class="nx-badge nx-success">
<i class="fas fa-check"></i> Selesai
</span>
<span class="nx-badge nx-warning">
<i class="fas fa-clock"></i> Pending
</span>
<span class="nx-badge nx-danger">
<i class="fas fa-times"></i> Gagal
</span>
<Badge title="Selesai" icon="fas fa-check" class="nx-success"/>
<Badge title="Pending" icon="fas fa-clock" class="nx-warning"/>
<Badge title="Gagal" icon="fas fa-times" class="nx-danger"/>
Badge dapat digunakan sebagai link yang dapat diklik.
<a href="#" class="nx-badge nx-primary">Link Badge</a>
<a href="#" class="nx-badge nx-info nx-pill">Link Pill Badge</a>
...
Badge dapat digunakan untuk menampilkan notifikasi pada icon.
<!-- Notifikasi Dot -->
<div class="nx-icon-badge">
<i class="fas fa-bell"></i>
<span class="nx-badge nx-badge-dot nx-danger">12</span>
</div>
<!-- Notifikasi dengan Angka -->
<div class="nx-icon-badge">
<i class="fas fa-envelope"></i>
<span class="nx-badge nx-badge-count nx-primary">9+</span>
</div>
<!-- Notifikasi Cart -->
<div class="nx-icon-badge">
<i class="fas fa-shopping-cart"></i>
<span class="nx-badge nx-badge-count nx-success">3</span>
</div>
<Badge
title="Selesai"
icon="fas fa-bell"
value="12"
class="nx-badge-dot nx-danger"
notifikasi="true" />
<Badge
title="Selesai"
icon="fas fa-envelope"
value="12"
class="nx-badge-count nx-primary"
notifikasi="true" />
<Badge
title="Selesai"
icon="fas fa-shopping-cart"
value="12"
class="nx-badge-count nx-success"
notifikasi="true" />
Badge dapat diposisikan di berbagai sudut elemen dengan menggunakan kelas posisi.
<!-- Top Right -->
<div class="nx-position-relative">
<div class="nx-box">Posisi Kanan Atas</div>
<span class="nx-badge nx-danger nx-positioned nx-top-right">99+</span>
</div>
<!-- Top Left -->
<div class="nx-position-relative">
<div class="nx-box">Posisi Kiri Atas</div>
<span class="nx-badge nx-primary nx-positioned nx-top-left">New</span>
</div>
<!-- Bottom Right -->
<div class="nx-position-relative">
<div class="nx-box">Posisi Kanan Bawah</div>
<span class="nx-badge nx-success nx-positioned nx-bottom-right">23</span>
</div>
<!-- Bottom Left -->
<div class="nx-position-relative">
<div class="nx-box">Posisi Kiri Bawah</div>
<span class="nx-badge nx-warning nx-positioned nx-bottom-left">!</span>
</div>
...
Badge dengan efek animasi saat nilai berubah.
<div class="nx-icon-badge">
<i class="fas fa-heart"></i>
<span class="nx-badge nx-badge-count nx-danger nx-animate">99+</span>
</div>
<div class="nx-icon-badge">
<i class="fas fa-comment"></i>
<span class="nx-badge nx-badge-count nx-primary nx-animate">50</span>
</div>
...
Badge untuk menampilkan status dengan indikator.
<span class="nx-badge nx-status">
<span class="nx-status-dot nx-status-online"></span>
Online
</span>
<span class="nx-badge nx-status">
<span class="nx-status-dot nx-status-offline"></span>
Offline
</span>
<span class="nx-badge nx-status">
<span class="nx-status-dot nx-status-away"></span>
Away
</span>
...
Badge dengan background gradient atau custom.
<span class="nx-badge nx-gradient-primary">Gradient</span>
<span class="nx-badge nx-gradient-success">Success</span>
<span class="nx-badge nx-pattern">Pattern</span>
...
Kumpulan badge yang dapat dikelompokkan.
<div class="nx-badge-group">
<span class="nx-badge nx-primary">Badge 1</span>
<span class="nx-badge nx-success">Badge 2</span>
<span class="nx-badge nx-warning">Badge 3</span>
</div>
...
Badge yang menampilkan informasi tambahan saat hover.
<span class="nx-badge nx-primary nx-tooltip" data-tooltip="Informasi tambahan">
Hover me
</span>
<Badge
title=" Hover me"
class="nx-primary nx-tooltip"
tooltip="Informasi tambahan" />
Koleksi badge dengan inspirasi modern.
<span class="nx-badge nx-soft-blue">Updates</span>
<span class="nx-badge nx-soft-green">Completed</span>
<span class="nx-badge nx-soft-red">Important</span>
<span class="nx-badge nx-soft-yellow">In Progress</span>
<span class="nx-badge nx-soft-purple">Featured</span>
...
<span class="nx-badge nx-gradient-ocean">Ocean</span>
<span class="nx-badge nx-gradient-sunset">Sunset</span>
<span class="nx-badge nx-gradient-forest">Forest</span>
<span class="nx-badge nx-gradient-aurora">Aurora</span>
<span class="nx-badge nx-gradient-cosmic">Cosmic</span>
...
<span class="nx-badge nx-border-blue">Active</span>
<span class="nx-badge nx-border-green">Verified</span>
<span class="nx-badge nx-border-red">Blocked</span>
<span class="nx-badge nx-border-orange">Pending</span>
<span class="nx-badge nx-border-purple">Premium</span>
...
<span class="nx-badge nx-modern-dark">
<i class="fas fa-star"></i> Pro
</span>
<span class="nx-badge nx-modern-success">
<i class="fas fa-check"></i> Done
</span>
<span class="nx-badge nx-modern-info">
<i class="fas fa-info"></i> Guide
</span>
<span class="nx-badge nx-modern-warning">
<i class="fas fa-clock"></i> Soon
</span>
...