Komponen / Navigasi
TabBar
Navigasi utama BizOps versi ponsel: kapsul kaca Liquid Glass berisi 3–5 tab (ikon + label) yang melayang di atas tepi bawah layar. Tiap tab adalah tautan ke halaman utama sebuah area: Beranda, Tugas, Persetujuan, Notifikasi, Akun.
Import
tsx
import { TabBar } from '@divistant/circca-react';Props · TabBar
Juga menerima atribut <nav>. Merender <nav aria-label> berisi <ul>.
| Prop | Tipe | Default | Keterangan |
|---|---|---|---|
| label | string | 'Navigasi utama' | Nama landmark navigasi (aria-label). Wajib unik bila ada lebih dari satu <nav>. |
| position | 'static' | 'absolute' | 'fixed' | 'static' | static = ikut alur (atur posisi lewat className). absolute/fixed = melayang 8 px di atas tepi bawah kontainer/viewport, di tengah, z-sticky. |
| safeArea | boolean | false | Tambah margin bawah env(safe-area-inset-bottom) untuk iPhone tanpa tombol beranda. |
| children | ReactNode | — | 3–5 TabBar.Item. |
| className | string | — | Kelas tambahan (digabung aman dengan tailwind-merge). |
Props · TabBar.Item
Juga menerima atribut <a>. Merender <li><a>; item aktif memberi aria-current="page".
| Prop | Tipe | Default | Keterangan |
|---|---|---|---|
| children | ReactNode | — | Label tab (properti Figma "Label"). Dengan asChild: satu elemen tautan berisi label. |
| icon | Visual | — | Ikon 22 (properti Figma "Icon"): House atau <House />. Item aktif memakai versi fill. |
| current | boolean | false | Halaman aktif (State Current): aria-current="page", latar neutral/subtle, ikon fill dan warna aksen. |
| badge | number | — | Jumlah di pojok ikon (Badge Danger). 0/kosong = tanpa Badge. |
| badgeLabel | string | '{badge} baru' | Arti jumlah untuk pembaca layar, ditambahkan ke nama tautan: "Persetujuan, 3 menunggu persetujuan". |
| asChild | boolean | false | Render sebagai elemen anak (Next <Link>) dengan gaya tab. |
| className | string | — | Kelas tambahan. |
Sumber
Kode komponen ada di packages/react/src/components/tab-bar. Gaya hanya memakai kelas token Circca HIG — tidak ada warna, spasi, atau radius mentah.