Komponen / Navigasi
Toolbar
Bar judul layar ala macOS: judul + subjudul, kelompok kontrol berbahan kaca, pencarian, dan satu aksi utama. Bar transparan — kaca hanya di kelompok kontrol.
Import
tsx
import { Toolbar, ToolbarGroup, ToolbarSearch } from '@divistant/circca-react';Props · Toolbar
Juga menerima atribut <div>. Toolbar.Group = ToolbarGroup.
| Prop | Tipe | Default | Keterangan |
|---|---|---|---|
| title | ReactNode | — | Judul layar (properti Figma Title): "PO Customer". Terpotong "…" bila sempit, tidak pernah terjepit di bawah 128 px. |
| subtitle | ReactNode | — | Satu baris konteks di bawah judul (properti Figma Subtitle): "142 dokumen". |
| titleAs | 'h1' | 'h2' | 'h3' | 'h1' | Level heading judul. Pakai h2 bila ada PageHeader berjudul h1 di bawahnya. |
| leading | ReactNode | — | Kontrol sebelum judul (mis. tombol sidebar), masuk kelompok kaca "Navigasi". |
| navigation | { onBack?, onForward?, backDisabled?, forwardDisabled?, backLabel?, forwardLabel? } | — | Tombol Kembali/Maju (CaretLeft/CaretRight) dalam kelompok kaca "Navigasi". Tiap tombol tampil bila handler-nya diisi. |
| navigationLabel | string | 'Navigasi' | Nama aksesibel kelompok navigasi. |
| search | Omit<SearchFieldProps, 'size'> | — | Pencarian kaca Medium 28 (properti Figma Search). Di bar < 512 px melipat menjadi tombol yang membentangkan kolom. |
| primaryAction | ReactNode | — | Satu Button Primary di ujung kanan (properti Figma Primary action). |
| overflow | ReactNode | — | Pengganti kelompok `collapse` saat bar < 576 px — biasanya IconButton "Aksi lain". |
| scrollEdge | boolean | false | Pudar kaca 12 px (glass/scroll-edge + blur 8) di bawah bar, untuk isi yang bergulir di bawah Toolbar. |
| children | ReactNode | — | Kelompok kontrol <Toolbar.Group>, di antara judul dan pencarian. |
Props · ToolbarGroup
role="group". Juga menerima atribut <div>.
| Prop | Tipe | Default | Keterangan |
|---|---|---|---|
| aria-label | string | — | Nama kelompok: "Aksi daftar", "Tampilan". Wajib bila berisi lebih dari satu kontrol. |
| glass | boolean | true | Kapsul kaca radius 16 (Liquid Glass Regular, garis 0.5 glass/edge). Matikan untuk SegmentedControl. |
| collapse | boolean | false | Sembunyikan kelompok saat bar < 576 px; sediakan aksi yang sama lewat `overflow`. |
Props · ToolbarSearch
SearchField Medium berbahan kaca, untuk merakit bar sendiri. Toolbar & AppHeader memakainya lewat prop `search`.
| Prop | Tipe | Default | Keterangan |
|---|---|---|---|
| …SearchFieldProps | Omit<SearchFieldProps, 'size'> | — | Sama dengan SearchField: value, onValueChange, placeholder, aria-label, dll. |
Sumber
Kode komponen ada di packages/react/src/components/toolbar. Gaya hanya memakai kelas token Circca HIG — tidak ada warna, spasi, atau radius mentah.