Tombol

Tombol adalah benda yang diklik seseorang agar sesuatu terjadi. button() merender <button> sungguhan dengan type="button", jadi meletakkannya di dalam formulir tidak mengirimkannya secara tidak sengaja.

Tombol dasar

Bawaannya adalah tombol solid, primary, berukuran sedang. Anaknya adalah labelnya; selebihnya adalah props.

stack({ direction: 'row', gap: 'md' },
  button('Satu'),
  button('Dua'),
  button('Tiga'),
)

Varian

Lima tingkat penekanan, dari satu-satunya ajakan bertindak di halaman sampai sesuatu yang terbaca seperti tautan.

stack({ direction: 'row', gap: 'md', wrap: true },
  button({ variant: 'solid' }, 'Solid'),
  button({ variant: 'soft' }, 'Soft'),
  button({ variant: 'outline' }, 'Outline'),
  button({ variant: 'ghost' }, 'Ghost'),
  button({ variant: 'link' }, 'Link'),
)

Warna

Setiap komponen bertema menimba dari lima palet yang sama, jadi tombol color: 'danger' dan peringatan color: 'danger' saling cocok tanpa keduanya perlu tahu satu sama lain.

stack({ direction: 'row', gap: 'md', wrap: true },
  button({ color: 'primary' }, 'Primary'),
  button({ color: 'neutral' }, 'Neutral'),
  button({ color: 'success' }, 'Success'),
  button({ color: 'warning' }, 'Warning'),
  button({ color: 'danger' }, 'Danger'),
)

stack({ direction: 'row', gap: 'md', wrap: true },
  button({ variant: 'soft', color: 'primary' }, 'Primary'),
  button({ variant: 'soft', color: 'neutral' }, 'Neutral'),
  button({ variant: 'soft', color: 'success' }, 'Success'),
  button({ variant: 'soft', color: 'warning' }, 'Warning'),
  button({ variant: 'soft', color: 'danger' }, 'Danger'),
)

Ukuran

stack({ direction: 'row', gap: 'md', align: 'center', wrap: true },
  button({ size: 'sm' }, 'Kecil'),
  button({ size: 'md' }, 'Sedang'),
  button({ size: 'lg' }, 'Besar'),
)

Ikon

Berikan markup SVG apa pun sebagai startIcon atau endIcon. Ikon diukur dalam em, jadi ia ikut berskala dengan tombolnya alih-alih butuh ukurannya sendiri.

stack({ direction: 'row', gap: 'md', wrap: true },
  button({
    startIcon: icon('plus'),
  }, 'Halaman baru'),
  button({
    variant: 'outline',
    endIcon: icon('arrow-right'),
  }, 'Lanjut'),
)

Tombol ikon

iconButton() adalah tombol persegi yang memuat satu ikon. label-nya wajib — ia menjadi nama yang dapat diakses, yang tidak bisa diberikan ikonnya sendiri, sekaligus tooltip saat disorot.

stack({ direction: 'row', gap: 'md' },
  iconButton({ label: 'Tambah', icon: icon('plus') }),
  iconButton({ label: 'Sunting', variant: 'soft', icon: icon('edit') }),
  iconButton({ label: 'Hapus', variant: 'ghost', color: 'danger', icon: icon('trash') }),
)

Memuat dan dinonaktifkan

loading menukar masuk pemutar dan menyetel aria-busy, sambil membiarkan labelnya di tempat agar tombolnya tidak berubah lebar di tengah tindakan.

stack({ direction: 'row', gap: 'md', wrap: true },
  button({ loading: true }, 'Menyimpan'),
  button({ variant: 'outline', loading: true }, 'Memeriksa'),
  button({ disabled: true }, 'Nonaktif'),
  button({ variant: 'soft', disabled: true }, 'Nonaktif'),
)

Tautan

Beri tombol sebuah href dan ia merender <a> sebagai gantinya — elemen yang tepat untuk sesuatu yang menavigasi. Jangkar tidak punya keadaan nonaktif, jadi disabled menjadi aria-disabled dan mengeluarkannya dari urutan tab.

Baca dokumentasi Komponen Tautan biasa

stack({ direction: 'row', gap: 'md', wrap: true },
  button({ href: '/docs' }, 'Baca dokumentasi'),
  button({ href: '/docs/ui', variant: 'outline' }, 'Komponen'),
  button({ href: '/docs', variant: 'link' }, 'Tautan biasa'),
)

Lebar penuh

button({ block: true, size: 'lg' }, 'Terapkan situs')

Props

Apa pun yang tidak terdaftar di sini jatuh ke elemen hasil render sebagai atribut — id, data-*, onclick, popovertarget, dan selebihnya.

Prop	Tipe	Bawaan	Deskripsi
`variant`	`'solid' \| 'soft' \| 'outline' \| 'ghost' \| 'link'`	`'solid'`	Seberapa besar penekanan yang dibawa tombolnya.
`color`	`'primary' \| 'neutral' \| 'success' \| 'warning' \| 'danger'`	`'primary'`	Dari palet mana ia menimba.
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Tinggi, bantalan, dan ukuran labelnya.
`href`	`string`	—	Merender <a> alih-alih <button>.
`startIcon`	`string`	—	Markup yang diletakkan sebelum labelnya.
`endIcon`	`string`	—	Markup yang diletakkan setelah labelnya.
`loading`	`boolean`	`false`	Menampilkan pemutar dan menyetel aria-busy.
`disabled`	`boolean`	`false`	Menonaktifkan tombolnya, atau menandai tautannya aria-disabled.
`block`	`boolean`	`false`	Meregang ke lebar penuh wadahnya.
`type`	`'button' \| 'submit' \| 'reset'`	`'button'`	Hanya untuk bentuk <button>.

iconButton() menerima props yang sama ditambah label yang wajib dan sebuah icon.