Komponen / Aksi

Button

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

React · BetaFigma · siapFigma Sumber

Anatomi

1Wadah kapsulTinggi 24 / 28 / 36, radius penuh. Primary & Danger berisi warna; Secondary berlatar kontrol dengan bayangan tipis; Ghost tanpa bingkai.
2Ikon depan (opsional)Phosphor 14/16 px. Diganti spinner saat loading.
3LabelKata kerja. Semibold di Primary/Danger, Medium di Secondary/Ghost.
4Ikon belakang (opsional)Biasanya CaretDown untuk tombol yang membuka menu.

Kapan dipakai

Gunakan

Satu Primary per layar/dialog untuk aksi utama.
Label kata kerja yang spesifik: "Terbitkan PO", bukan "OK".
Aksi merusak (hapus, batalkan dokumen) memakai Danger dan selalu dikonfirmasi lewat Dialog.

Hindari

Jangan menaruh dua Primary berdampingan.
Jangan memakai Button untuk navigasi tanpa `asChild` + <a>.
Jangan menonaktifkan tombol tanpa penjelasan — tampilkan alasan di dekatnya.

Contoh benar & salah

GunakanSatu aksi utama per kelompok. Aksi lain Secondary atau Ghost.

HindariDua Primary bersaing; pengguna ragu mana yang utama.

GunakanLabel kata kerja spesifik yang menyebut hasilnya.

HindariLabel generik ("OK", "Ya") yang memaksa pengguna membaca ulang konteks.

Penulisan

Mulai dengan kata kerja dan sebut objeknya bila perlu: "Terbitkan PO", "Kirim invoice", "Tandai kalah".
Huruf kapital hanya di awal kalimat ("Simpan draf", bukan "Simpan Draf").
Maksimal 3 kata. Penjelasan panjang taruh di teks sekitar tombol, bukan di label.
Tombol batal di dialog: "Batal". Aksi merusak menyebut akibatnya: "Hapus PO", bukan "Hapus".

Komponen terkait