IconButton

Tombol bulat berisi ikon saja untuk toolbar dan baris tabel. Label aksesibel wajib dan otomatis tampil sebagai tooltip.

React · BetaFigma · siapFigma Sumber

Varian

Secondary (bingkai tipis + bayangan, seperti Button Secondary) untuk aksi mandiri. Ghost (transparan) untuk toolbar dan baris tabel.

import { IconButton } from '@divistant/circca-react';
import { DotsThree, DownloadSimple } from '@phosphor-icons/react';

export default function Example() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      <IconButton icon={DownloadSimple} label="Unduh PDF" />
      <IconButton variant="ghost" icon={DotsThree} label="Aksi lain" />
    </div>
  );
}

Ukuran

Small 24 (ikon 14) untuk tabel padat, Medium 28 (ikon 16) bawaan, Large 36 (ikon 16) untuk layar sentuh.

import { IconButton } from '@divistant/circca-react';
import { ArrowsClockwise } from '@phosphor-icons/react';

export default function Example() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      <IconButton size="sm" icon={ArrowsClockwise} label="Muat ulang (Small · 24)" />
      <IconButton size="md" icon={ArrowsClockwise} label="Muat ulang (Medium · 28)" />
      <IconButton size="lg" icon={ArrowsClockwise} label="Muat ulang (Large · 36)" />
    </div>
  );
}

Aksi sekunder (Saring, Muat ulang, Cetak, Unduh PDF, Aksi lain) sebagai IconButton Ghost; aksi utama tetap Button berlabel.

PO-2026-0142Dibuat oleh Anisa Nugraha

import { Button, IconButton, TooltipProvider } from '@divistant/circca-react';
import { ArrowsClockwise, DotsThree, DownloadSimple, Funnel, Printer } from '@phosphor-icons/react';

export default function Example() {
  // Toolbar dokumen: aksi sekunder sebagai IconButton Ghost, aksi utama tetap Button berlabel.
  return (
    <TooltipProvider>
      <div className="flex w-full flex-wrap items-center gap-3 rounded-lg border-[0.5px] border-default bg-default px-3 py-2">
        <div className="grid">
          <span className="type-body-default-semibold text-default">PO-2026-0142</span>
          <span className="type-caption-default text-muted">Dibuat oleh Anisa Nugraha</span>
        </div>
        <div className="ml-auto flex items-center gap-1">
          <IconButton variant="ghost" icon={Funnel} label="Saring" />
          <IconButton variant="ghost" icon={ArrowsClockwise} label="Muat ulang" />
          <IconButton variant="ghost" icon={Printer} label="Cetak" />
          <IconButton variant="ghost" icon={DownloadSimple} label="Unduh PDF" />
          <IconButton variant="ghost" icon={DotsThree} label="Aksi lain" />
        </div>
        <Button variant="primary">Terbitkan PO</Button>
      </div>
    </TooltipProvider>
  );
}

Nonaktif & sebagai tautan

Nonaktif = opasitas 45%. Untuk navigasi pakai `asChild` agar elemen tetap <a>/<Link>.

import { IconButton } from '@divistant/circca-react';
import { ArrowSquareOut, Printer } from '@phosphor-icons/react';

export default function Example() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      <IconButton icon={Printer} label="Cetak" disabled />
      <IconButton variant="ghost" icon={Printer} label="Cetak" disabled />
      {/* asChild: gaya tombol ikon, elemen tetap <a> (atau <Link> Next.js) */}
      <IconButton asChild variant="ghost" icon={ArrowSquareOut} label="Buka INV-2026-0192">
        <a href="#inv-2026-0192" />
      </IconButton>
    </div>
  );
}