Matrix Pill Filter

ALL_UNITSACTIVEOFFLINE

HTML_STRUCTURE

<div class='bh-nav-v2-pills'><span class='active'>ALL_UNITS</span><span>ACTIVE</span><span>OFFLINE</span></div>

CSS_STYLING

.bh-nav-v2-pills { display: flex; gap: 8px; } .bh-nav-v2-pills span { padding: 5px 15px; border: 1px solid #222; color: #555; font-size: 9px; font-weight: 900; cursor: pointer; transition: 0.3s; text-transform: uppercase; } .bh-nav-v2-pills span:hover { border-color: #fff; color: #fff; } .bh-nav-v2-pills span.active { background: #fff; color: #000; border-color: #fff; }

// DESIGN_NOTES: Komponen ini menggunakan CSS variabel untuk memudahkan kustomisasi warna dan transisi.