Düğme

Düğme, bir şeyin olması için tıklanan şeydir. button(), type="button" taşıyan gerçek bir <button> işler, böylece bir formun içine bırakmak onu kazara göndermez.

Temel düğme

Varsayılan; dolu, primary, orta boy bir düğmedir. Çocuklar etikettir; geri kalan her şey proptur.

stack({ direction: 'row', gap: 'md' },
  button('Bir'),
  button('İki'),
  button('Üç'),
)

Türevler

Sayfadaki tek eylem çağrısından bağlantı gibi okunan bir şeye kadar beş vurgu düzeyi.

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'),
)

Renkler

Temalı her bileşen aynı beş paletten beslenir, bu yüzden bir color: 'danger' düğmesi ile bir color: 'danger' uyarısı, hiçbiri öbüründen haberdar olmadan uyuşur.

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'),
)

Boyutlar

stack({ direction: 'row', gap: 'md', align: 'center', wrap: true },
  button({ size: 'sm' }, 'Küçük'),
  button({ size: 'md' }, 'Orta'),
  button({ size: 'lg' }, 'Büyük'),
)

Simgeler

Herhangi bir SVG biçimlendirmesini startIcon ya da endIcon olarak geçirin. Simgeler em cinsinden boyutlandırılır, bu yüzden kendilerine ait bir boyuta gerek kalmadan düğmeyle birlikte ölçeklenirler.

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

Simge düğmesi

iconButton() tek bir simge taşıyan kare bir düğmedir. label değeri zorunludur — simgenin kendisinin veremeyeceği erişilebilir ad ve üzerine gelindiğinde çıkan ipucu odur.

stack({ direction: 'row', gap: 'md' },
  iconButton({ label: 'Ekle', icon: icon('plus') }),
  iconButton({ label: 'Düzenle', variant: 'soft', icon: icon('edit') }),
  iconButton({ label: 'Sil', variant: 'ghost', color: 'danger', icon: icon('trash') }),
)

Yükleniyor ve devre dışı

loading yerine bir döndürücü koyar ve aria-busy ayarlar; etiketi yerinde bırakır, böylece düğme eylem ortasında genişlik değiştirmez.

stack({ direction: 'row', gap: 'md', wrap: true },
  button({ loading: true }, 'Kaydediliyor'),
  button({ variant: 'outline', loading: true }, 'Denetleniyor'),
  button({ disabled: true }, 'Devre dışı'),
  button({ variant: 'soft', disabled: true }, 'Devre dışı'),
)

Bağlantılar

Bir düğmeye href verin, bunun yerine bir <a> işlesin — gezinen bir şey için doğru öğe budur. Çapaların devre dışı durumu yoktur, bu yüzden disabled değeri aria-disabled olur ve onu sekme sırasından çıkarır.

Belgeleri okuyun Bileşenler Düz bağlantı

stack({ direction: 'row', gap: 'md', wrap: true },
  button({ href: '/docs' }, 'Belgeleri okuyun'),
  button({ href: '/docs/ui', variant: 'outline' }, 'Bileşenler'),
  button({ href: '/docs', variant: 'link' }, 'Düz bağlantı'),
)

Tam genişlik

button({ block: true, size: 'lg' }, 'Siteyi dağıt')

Proplar

Burada listelenmeyen her şey işlenen öğeye öznitelik olarak düşer — id, data-*, onclick, popovertarget ve gerisi.

Prop	Tür	Varsayılan	Açıklama
`variant`	`'solid' \| 'soft' \| 'outline' \| 'ghost' \| 'link'`	`'solid'`	Düğmenin taşıdığı vurgu.
`color`	`'primary' \| 'neutral' \| 'success' \| 'warning' \| 'danger'`	`'primary'`	Hangi paletten besleneceği.
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Yükseklik, dolgu ve etiket boyutu.
`href`	`string`	—	<button> yerine bir <a> işler.
`startIcon`	`string`	—	Etiketin önüne yerleştirilen biçimlendirme.
`endIcon`	`string`	—	Etiketin ardına yerleştirilen biçimlendirme.
`loading`	`boolean`	`false`	Bir döndürücü gösterir ve aria-busy ayarlar.
`disabled`	`boolean`	`false`	Düğmeyi devre dışı bırakır ya da bir bağlantıyı aria-disabled işaretler.
`block`	`boolean`	`false`	Kabının tam genişliğine uzanır.
`type`	`'button' \| 'submit' \| 'reset'`	`'button'`	Yalnızca <button> biçimi için.

iconButton() aynı propları, artı zorunlu bir label ve bir icon alır.