Button

FREE

Varyantlar, boyutlar, baş/son ikon, yükleniyor durumu ve ButtonGroup içeren buton. asChild destekler.

Canlı düzenle

Ayarları değiştir; bileşen ve kodu anında güncellensin.

Ayarlar

Metin

Varyant

Boyut

Ana renk

Baş ikon

Son ikon

Yükleniyor

Devre dışı

Basılı tut (onay)

Alt menülü (split)

Kod

import { Rocket } from "lucide-react";
import { Button } from "@/components/ui/button";

<Button
  startIcon={<Rocket />}
>
  Deploy
</Button>

Terminal

npx @bloxa/cli add button
# or: npx shadcn@latest add @bloxa/button

Ayrıca kurulur: hold-button

Terminal

npx shadcn@latest add @bloxa/hold-button

Otomatik kurulan paketler: radix-ui, class-variance-authority

Beş görsel stil; ana eylem için primary kullan.

startIcon / endIcon ya da yalnız ikon. Yalnız ikonlu butonlara aria-label ver.

Genişlik sabit kalır, buton tıklanamaz olur. Denemek için ilk butona bas.

Ana eylem + açılır menü; menüde alt menü de olabilir.

Riskli işlemler için. Erken bırakınca iptal olur.

Press and hold for 1.2 seconds.

asChild ile buton stilini bir <a> etiketine uygula.

Her bileşen, oluşturduğu HTML elemanının özelliklerini de kabul eder.

Özellik	Tip	Varsayılan	Açıklama
variant	"primary" \| "secondary" \| "outline" \| "ghost" \| "destructive"	"primary"	Görsel stil.
size	"sm" \| "md" \| "lg" \| "icon" \| "icon-sm"	"md"	Boyut; icon boyutları kare butonlar içindir.
startIcon	ReactNode	—	Etiketten önce gösterilen ikon.
endIcon	ReactNode	—	Etiketten sonra gösterilen ikon.
loading	boolean	false	Spinner gösterir, genişliği korur ve butonu devre dışı bırakır.
asChild	boolean	false	Stili alt elemana (ör. <a>) uygular.

Butonları tek bir segment hâline getirir.

@bloxa/hold-button ile ayrıca kurulur.

Özellik	Tip	Varsayılan	Açıklama
onConfirm	() => void	—	Basılı tutma tamamlanınca çalışır.
duration	number	1200	Basılı tutma süresi (ms).
variant	ButtonProps["variant"]	"destructive"	Buton stili.
size	ButtonProps["size"]	"md"	Buton boyutu.