Komponen / Lapisan & umpan balik

Banner

Pesan di dalam halaman yang tetap terlihat sampai keadaannya berubah: dokumen dikembalikan, data belum lengkap, sinkronisasi gagal.

React · BetaFigma · siapFigma Sumber

Tone

Info untuk pemberitahuan, Success untuk keadaan berhasil yang perlu tetap terlihat, Warning untuk perlu perhatian atau tindakan, Danger untuk gagal atau terblokir.

Sinkronisasi BizOps terakhir 10.42

Data PO diperbarui setiap 15 menit. Perubahan di BizOps baru terlihat setelah sinkronisasi berikutnya.

PO-2026-0142 lunas

Termin 2 sebesar Rp 60.000.000 diterima 4 Nov 2026.

Margin di bawah 5%

Margin lisensi 3,8% perlu persetujuan Direksi sebelum PO distributor diterbitkan.

Faktur pajak gagal diunggah

Coretax menolak berkas: NPWP customer tidak cocok. Periksa data customer lalu unggah ulang.

import { Banner } from '@divistant/circca-react';

export default function Example() {
  return (
    <div className="grid gap-3">
      <Banner tone="info" title="Sinkronisasi BizOps terakhir 10.42" description="Data PO diperbarui setiap 15 menit. Perubahan di BizOps baru terlihat setelah sinkronisasi berikutnya." />
      <Banner tone="success" title="PO-2026-0142 lunas" description="Termin 2 sebesar Rp 60.000.000 diterima 4 Nov 2026." />
      <Banner tone="warning" title="Margin di bawah 5%" description="Margin lisensi 3,8% perlu persetujuan Direksi sebelum PO distributor diterbitkan." />
      <Banner tone="danger" title="Faktur pajak gagal diunggah" description="Coretax menolak berkas: NPWP customer tidak cocok. Periksa data customer lalu unggah ulang." />
    </div>
  );
}

Dengan aksi & tombol tutup

Sebut siapa, kapan, alasannya, dan beri aksi untuk langkah berikutnya. Tombol × hanya bila pesan boleh diabaikan.

Dikembalikan oleh Finance · Rina Kartika, 2 Okt 2026

“PO customer yang dilampirkan belum bertanda tangan. Mohon unggah versi yang sudah ditandatangani customer.”

import { useState } from 'react';
import { Banner, Button } from '@divistant/circca-react';

// Dokumen dikembalikan (Figma BizOps › 07 Template › Form PO-2026-0146): siapa, kapan, alasan, dan langkah berikutnya.
export default function Example() {
  const [tampil, setTampil] = useState(true);
  if (!tampil) {
    return (
      <Button size="sm" onClick={() => setTampil(true)}>
        Tampilkan lagi
      </Button>
    );
  }
  return (
    <Banner
      tone="warning"
      title="Dikembalikan oleh Finance · Rina Kartika, 2 Okt 2026"
      description="“PO customer yang dilampirkan belum bertanda tangan. Mohon unggah versi yang sudah ditandatangani customer.”"
      actions={
        <>
          <Button size="sm">Unggah ulang</Button>
          <Button size="sm" variant="ghost">
            Lihat riwayat
          </Button>
        </>
      }
      onDismiss={() => setTampil(false)}
    />
  );
}

Muncul setelah aksi

`announce` membuat pembaca layar langsung membacakan Banner yang muncul setelah halaman dimuat.

import { useState } from 'react';
import { Banner, Button } from '@divistant/circca-react';

// Banner yang muncul setelah aksi: announce membuat pembaca layar langsung membacakannya.
export default function Example() {
  const [hasil, setHasil] = useState<'gagal' | 'diproses'>();
  return (
    <div className="grid gap-3">
      <div className="flex flex-wrap gap-2">
        <Button size="sm" onClick={() => setHasil('gagal')}>
          Kirim ke e-Faktur (gagal)
        </Button>
        <Button size="sm" onClick={() => setHasil('diproses')}>
          Kirim ke e-Faktur (berhasil)
        </Button>
      </div>
      {hasil === 'gagal' && (
        <Banner
          announce
          tone="danger"
          title="Faktur INV-2026-0192 belum terkirim"
          description="Koneksi ke Coretax terputus. Data tidak berubah — coba kirim lagi."
          actions={<Button size="sm">Coba lagi</Button>}
          onDismiss={() => setHasil(undefined)}
        />
      )}
      {hasil === 'diproses' && (
        <Banner
          announce
          tone="info"
          title="Faktur INV-2026-0192 sedang diproses Coretax"
          description="Nomor seri faktur muncul di sini setelah Coretax selesai, biasanya dalam 5 menit."
        />
      )}
    </div>
  );
}