Komponen / Lapisan & umpan balik
Banner
Pesan di dalam halaman yang tetap terlihat sampai keadaannya berubah: dokumen dikembalikan, data belum lengkap, sinkronisasi gagal.
Import
tsx
import { Banner } from '@divistant/circca-react';Props
Juga menerima atribut <section> (mis. tabIndex dan ref untuk memindahkan fokus ke ringkasan kesalahan).
| Prop | Tipe | Default | Keterangan |
|---|---|---|---|
| tone | 'info' | 'success' | 'warning' | 'danger' | 'info' | Makna pesan; menentukan warna dan ikon. |
| title | ReactNode | — | Apa yang terjadi, singkat. |
| description | ReactNode | — | Penjelasan dan apa yang perlu dilakukan pengguna. |
| actions | ReactNode | — | Tombol aksi (Button size="sm"). |
| onDismiss | () => void | — | Menampilkan tombol × dan dipanggil saat ditekan. |
| announce | boolean | false | Untuk Banner yang muncul setelah halaman dimuat: Danger/Warning → role="alert", Info/Success → role="status". |
| className | string | — | Kelas tambahan (digabung aman dengan tailwind-merge). |
Sumber
Kode komponen ada di packages/react/src/components/banner. Gaya hanya memakai kelas token Circca HIG — tidak ada warna, spasi, atau radius mentah.