Button
Tombol aksi dengan tujuh varian, empat ukuran, dan status muat.
Basis: Elemen <button> asli — fokus, aktivasi papan ketik, dan status nonaktif ditangani peramban.
src/components/ui/button.tsxVarian
Tujuh varian yang seluruhnya memakai alias token semantik, tanpa satu pun nilai warna literal.
Ukuran
Tinggi tetap 32 / 40 / 48 piksel, ditambah ukuran ikon persegi.
Matriks Status
Status hover, fokus, dan ditekan dipaksa lewat atribut data-preview sehingga seluruhnya tampak sekaligus dalam satu tangkapan layar.
| Status | primary | secondary | outline | destructive |
|---|---|---|---|---|
| Normal | ||||
| Hover | ||||
| Fokus | ||||
| Ditekan | ||||
| Nonaktif |
Status Muat
Menonaktifkan tombol dan menukar ikon awal dengan pemutar, sekaligus menyetel aria-busy.
Dengan Ikon
Ikon awal dan akhir menerima simpul React apa pun.
Lebar Penuh
Props
| Prop | Tipe | Bawaan | Keterangan |
|---|---|---|---|
variant | "primary" | "secondary" | "outline" | "ghost" | "subtle" | "destructive" | "link" | "primary" | Gaya visual tombol. |
size | "sm" | "md" | "lg" | "icon" | "md" | Tinggi dan padding tombol. |
loading | boolean | false | Menampilkan pemutar, menonaktifkan tombol, dan menyetel aria-busy. |
leadingIcon | ReactNode | — | Ikon sebelum label. Disembunyikan saat loading. |
trailingIcon | ReactNode | — | Ikon setelah label. |
…props | ButtonHTMLAttributes<HTMLButtonElement> | — | Seluruh atribut tombol bawaan diteruskan, termasuk disabled, type, dan onClick. |