Button

Tombol untuk menjalankan aksi. Label berupa kata kerja: "Simpan", "Terbitkan BAST".

React · BetaFigma · siapFigma Sumber

Varian

Primary maksimal satu per layar (aksi utama). Secondary untuk aksi umum, Ghost untuk aksi ringan/toolbar, Danger untuk aksi merusak.

import { Button } from '@divistant/circca-react';
import { Trash } from '@phosphor-icons/react';

export default function Example() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      <Button variant="primary">Terbitkan PO</Button>
      <Button>Simpan draf</Button>
      <Button variant="ghost">Batal</Button>
      <Button variant="danger" leadingVisual={Trash}>Hapus</Button>
    </div>
  );
}

Ukuran

Medium (28) default. Small (24) untuk toolbar & tabel padat, Large (36) untuk aksi utama di form lega atau layar sentuh. Semua berbentuk kapsul.

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

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

Dengan ikon

Ikon dari @phosphor-icons/react (set yang sama dengan Figma Circca HIG · Icons). Ikon 14 di Small, 16 di Medium/Large.

import { Button } from '@divistant/circca-react';
import { CaretDown, DownloadSimple, Plus } from '@phosphor-icons/react';

export default function Example() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      <Button variant="primary" leadingVisual={Plus}>Buat PO</Button>
      <Button leadingVisual={DownloadSimple}>Ekspor</Button>
      <Button trailingVisual={CaretDown}>Aksi lain</Button>
    </div>
  );
}

Loading & nonaktif

Saat loading, tombol tetap bisa difokus tetapi klik diabaikan (aria-disabled + aria-busy).

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

export default function Example() {
  const [saving, setSaving] = useState(false);
  const simpan = () => {
    setSaving(true);
    setTimeout(() => setSaving(false), 1500);
  };
  return (
    <div className="flex flex-wrap items-center gap-3">
      <Button variant="primary" loading={saving} onClick={simpan}>
        {saving ? 'Menyimpan…' : 'Simpan'}
      </Button>
      <Button disabled>Nonaktif</Button>
      <Button variant="primary" disabled>Terbitkan</Button>
    </div>
  );
}

Sebagai tautan

Untuk navigasi, pakai `asChild` agar elemen tetap <a>/<Link> dengan gaya tombol.

Buka PO-2026-0001

import { Button } from '@divistant/circca-react';
import { ArrowSquareOut } from '@phosphor-icons/react';

export default function Example() {
  // asChild: gaya tombol, elemen tetap <a> (atau <Link> Next.js)
  return (
    <Button asChild trailingVisual={ArrowSquareOut}>
      <a href="#po-2026-0001">Buka PO-2026-0001</a>
    </Button>
  );
}