Komponen / Aksi
IconButton
Tombol bulat berisi ikon saja untuk toolbar dan baris tabel. Label aksesibel wajib dan otomatis tampil sebagai tooltip.
Import
tsx
import { IconButton } from '@divistant/circca-react';Props
Juga menerima semua atribut <button> kecuali aria-label (pakai `label`).
| Prop | Tipe | Default | Keterangan |
|---|---|---|---|
| icon | Visual | — | Ikon Phosphor: DownloadSimple (komponen) atau <DownloadSimple /> (elemen dari @phosphor-icons/react/ssr di Server Component). |
| label | string | — | Wajib. Nama aksi untuk aria-label dan isi tooltip. |
| variant | 'secondary' | 'ghost' | 'secondary' | Secondary berbingkai & berbayangan; Ghost transparan. |
| size | 'sm' | 'md' | 'lg' | 'md' | Diameter 24 / 28 / 36; ikon 14 / 16 / 16. |
| tooltip | boolean | true | Tampilkan tooltip berisi label. Matikan bila membungkus dengan Tooltip sendiri. |
| tooltipSide | 'top' | 'bottom' | 'left' | 'right' | 'top' | Posisi tooltip. |
| disabled | boolean | false | Nonaktif (opasitas 45%); tooltip tidak tampil. |
| asChild | boolean | false | Render sebagai elemen anak (tautan) dengan gaya tombol ikon. |
| className | string | — | Kelas tambahan (digabung aman dengan tailwind-merge). |
Sumber
Kode komponen ada di packages/react/src/components/icon-button. Gaya hanya memakai kelas token Circca HIG — tidak ada warna, spasi, atau radius mentah.