Buton — Acun UI

01

Varyantlar

Renk variant ile seçilir; varsayılan primary ana renktir. Sayfadaki asıl işlem için primary, geri alınamaz işlemler için danger kullanın. secondary gri dolgulu butondur; beyaz, kenarlıklı nötr buton white'tır (Vazgeç, araç çubukları, sayfalama). ghost'un zemini ve kenarlığı yoktur, üzerine gelince yalnızca yazısı koyulaşır; "seçimi temizle" gibi hafif işlemler içindir. link bağlantı gibi görünür (ana renk, üzerine gelince altı çizili) ama butonun boyunu korur. Dolu butonlar üzerine gelince bir ton koyulaşır.

CANLI ÖRNEK

<div class="flex flex-wrap gap-2">
    <acun:button>Kaydet</acun:button>
    <acun:button variant="success">Onayla</acun:button>
    <acun:button variant="danger">Sil</acun:button>
    <acun:button variant="warning">Beklet</acun:button>
    <acun:button variant="info">Bilgi</acun:button>
    <acun:button variant="secondary">Arşivle</acun:button>
    <acun:button variant="dark">Taslak</acun:button>
    <acun:button variant="light">Önizle</acun:button>
    <acun:button variant="white">Vazgeç</acun:button>
    <acun:button variant="ghost">Seçimi temizle</acun:button>
    <acun:button variant="link">Tümünü gör</acun:button>
</div>

Prop	Değerler
`variant`	primary \| success \| danger \| warning \| info \| secondary \| dark \| light \| white \| ghost \| link

02

Gölgeli

Dolu butonlara (primary, success, danger, warning, info, secondary, dark, light) shadow verilirse altında butonun renginde yumuşak bir gölge çıkar; üzerine gelince gölge kalkar. Sayfanın tek ana işlemini öne çıkarmak için kullanın.

CANLI ÖRNEK

<div class="flex flex-wrap gap-3">
    <acun:button shadow>Kaydet</acun:button>
    <acun:button variant="success" shadow>Onayla</acun:button>
    <acun:button variant="danger" shadow>Sil</acun:button>
    <acun:button variant="warning" shadow>Beklet</acun:button>
    <acun:button variant="info" shadow>Bilgi</acun:button>
    <acun:button variant="secondary" shadow>Arşivle</acun:button>
    <acun:button variant="dark" shadow>Taslak</acun:button>
    <acun:button variant="light" shadow>Önizle</acun:button>
</div>

Prop	Değerler
`shadow`	true \| false (yalnızca dolu butonlarda)

03

Renk tablosu

Her renk üç biçimde gelir: dolu (primary), çerçeveli (outline-primary) ve açık zeminli (soft-primary). Adlar tutarlıdır; bir rengi seçip biçimini değiştirmek için yalnızca ön eki değiştirin.

CANLI ÖRNEK

<div class="grid gap-3">
    @foreach (['primary', 'success', 'danger', 'warning', 'info', 'secondary', 'dark'] as $renk)
        <div class="flex flex-wrap items-center gap-2">
            <span class="w-16 text-xs font-medium text-gray-500 dark:text-zinc-400">{{ $renk }}</span>
            <acun:button :variant="$renk">Dolu</acun:button>
            <acun:button :variant="'outline-'.$renk">Outline</acun:button>
            <acun:button :variant="'soft-'.$renk">Soft</acun:button>
        </div>
    @endforeach
</div>

Prop	Değerler
`renkler`	primary · success · danger · warning · info · secondary · dark
`biçim`	(dolu) · outline-{renk} · soft-{renk}

04

Renkleri değiştirme

Dolu butonların zemin, kenarlık, üzerine gelince ve gölge renkleri panel.css içindeki --btn-* değişkenlerinden gelir. Uygulamanızın CSS dosyasında yeniden tanımlarsanız bütün butonlar birlikte değişir. primary ana rengi (--color-brand-600) izler; tema ayarlarında seçilen renk de ona uygulanır.

CSS

/* resources/css/app.css, panel.css'ten sonra */
:root {
    --btn-success-bg: #16a34a;
    --btn-success-hover: #15803d;
    --btn-success-shadow: rgb(22 163 74 / 60%);

    --btn-light-color: #334155; /* light butonun yazı rengi */
}

Prop	Değerler
`--btn-{variant}-bg · -hover · -shadow`	primary, success, danger, warning, info, secondary, dark, light
`--btn-{variant}-border · -hover-border`	Verilmezse zemin / üzerine gelince rengi
`--btn-light-color`	light butonun yazı rengi (diğerlerinde beyaz)

05

Outline varyantlar

Outline butonlar yalnızca kenarlık ve yazı rengiyle çizilir, üzerine gelince dolar. Aynı alanda birden çok renkli işlem olduğunda dolu butonlardan daha sakin bir görünüm verir.

CANLI ÖRNEK

<div class="flex flex-wrap gap-2">
    <acun:button variant="outline">Dışa Aktar</acun:button>
    <acun:button variant="outline-success">Geri Al</acun:button>
    <acun:button variant="outline-warning">Uyar</acun:button>
    <acun:button variant="outline-danger">Kalıcı Sil</acun:button>
    <acun:button variant="outline-info">Ayrıntılar</acun:button>
    <acun:button variant="outline-secondary">Arşivle</acun:button>
    <acun:button variant="outline-dark">Hareketler</acun:button>
</div>

Prop	Değerler
`variant`	outline (outline-primary) \| outline-success \| outline-warning \| outline-danger \| outline-info \| outline-secondary \| outline-dark

06

Soft varyantlar

Soft butonlar açık renkli bir zeminle çizilir ve üzerine gelince tam renge döner. Tablo satırları ve kartlar gibi çok sayıda butonun yan yana durduğu yerlerde göz yormaz.

CANLI ÖRNEK

<div class="flex flex-wrap gap-2">
    <acun:button variant="soft">Filtrele</acun:button>
    <acun:button variant="soft-success">Teslim edildi</acun:button>
    <acun:button variant="soft-warning">Ertele</acun:button>
    <acun:button variant="soft-danger">Kaldır</acun:button>
    <acun:button variant="soft-info">Ayrıntılar</acun:button>
    <acun:button variant="soft-secondary">Arşivle</acun:button>
    <acun:button variant="soft-dark">Taslak</acun:button>
</div>

Prop	Değerler
`variant`	soft (soft-primary) \| soft-success \| soft-warning \| soft-danger \| soft-info \| soft-secondary (soft-gray) \| soft-dark

07

Boyutlar

Boyut size ile seçilir; varsayılan md. sm tablo satırı ve kart başlığı gibi dar alanlar içindir. lg hem daha yüksek hem daha geniştir ve yazısı bir boy büyüktür; boş durum ekranları ya da mobilde tek başına duran ana işlem gibi öne çıkması gereken yerler için uygundur.

CANLI ÖRNEK

<div class="flex flex-wrap items-center gap-2">
    <acun:button size="sm">Küçük</acun:button>
    <acun:button>Orta</acun:button>
    <acun:button size="lg">Büyük</acun:button>
</div>

Prop	Değerler
`size`	sm \| md \| lg \| icon

08

İkonlu

İkonu yazıyla birlikte slot'a koyun; aradaki boşluk kendiliğinden gelir. Yalnızca ikon içeren butonlarda size="icon" kare bir buton çizer; görünür yazı olmadığı için aria-label ve title vermeyi unutmayın.

CANLI ÖRNEK

<div class="flex flex-wrap items-center gap-2">
    <acun:button><acun:icon name="plus" size="4" /> Yeni sipariş</acun:button>
    <acun:button variant="white"><acun:icon name="arrow-down-tray" size="4" /> Excel'e aktar</acun:button>
    <acun:button variant="outline" size="icon" aria-label="Düzenle" title="Düzenle">
        <acun:icon name="pencil-square" size="4" />
    </acun:button>
    <acun:button variant="soft-danger" size="icon" aria-label="Sil" title="Sil">
        <acun:icon name="trash" size="4" />
    </acun:button>
</div>

Prop	Değerler
`size`	icon (yalnızca ikon)

09

Durumlar

loading yazının önüne dönen bir ikon ekler ve aria-busy="true" verir, ancak butonu pasifleştirmez; işlem sürerken tekrar tıklanmasın diye disabled ile birlikte kullanın. disabled butonu soluklaştırır ve tıklamayı engeller; pasif butonda üzerine gelme, basma ve gölge çalışmaz. Etkin butonlara basıldığında buton 1 piksel aşağı iner.

CANLI ÖRNEK

<div class="flex flex-wrap items-center gap-2">
    <acun:button loading disabled>Kaydediliyor</acun:button>
    <acun:button disabled>Pasif</acun:button>
    <acun:button variant="white" disabled>Pasif</acun:button>
</div>

Prop	Değerler
`loading`	true \| false
`disabled`	true \| false

10

Bağlantı ve form butonu

href verilirse buton <a> olarak çizilir; bu durumda type ve loading kullanılmaz. Bir bağlantı gerçekten pasif olamadığı için disabled verildiğinde aria-disabled="true" eklenir, bağlantı Tab sırasından çıkar ve tıklanamaz. Form içinde type="submit" verin. Livewire işlemi sürerken butonu kilitlemek için wire:loading.attr="disabled" ekleyin.

BLADE

<acun:button :href="route('siparisler.index')" variant="white" wire:navigate>Listeye dön</acun:button>

<form wire:submit="kaydet">
    …
    <acun:button type="submit" wire:loading.attr="disabled" wire:target="kaydet">Kaydet</acun:button>
</form>

Prop	Değerler
`href`	Verilirse <a> çizer
`type`	button \| submit \| reset

11

Dış bağlantı

Başka bir siteye giden bağlantı butonlarında href ile birlikte external verin: bağlantı yeni sekmede açılır (target="_blank", rel="noopener"), yazının sonuna küçük bir ok ikonu eklenir ve ekran okuyuculara "(yeni sekmede açılır)" bilgisi verilir. Yalnızca ikonlu butonlarda (size="icon") ok eklenmez, bilgi notu yine okunur.

CANLI ÖRNEK

<div class="flex flex-wrap items-center gap-2">
    <acun:button href="https://laravel.com/docs" variant="white" external>Laravel belgeleri</acun:button>
    <acun:button href="https://livewire.laravel.com/docs" variant="ghost" external>Livewire belgeleri</acun:button>
</div>

Prop	Değerler
`external`	true \| false (href ile)

12

Küçük ekranda gizleme

Buton varsayılan olarak inline-flex çizilir. class içinde bir görünüm sınıfı (hidden, block, flex, grid, contents …) verirseniz varsayılanın yerine o kullanılır; böylece class="hidden sm:inline-flex" butonu telefonda gizler, sm ve üstünde gösterir. Dar ekranda yer açmak için ikincil işlemlerde kullanın.

CANLI ÖRNEK

<div class="flex flex-wrap items-center gap-2">
    <acun:button><acun:icon name="plus" size="4" /> Yeni sipariş</acun:button>
    <acun:button variant="white" class="hidden sm:inline-flex">
        <acun:icon name="arrow-down-tray" size="4" /> Excel'e aktar
    </acun:button>
</div>

Prop	Değerler
`class`	hidden sm:inline-flex · block · flex · grid …

API

Prop'lar ve slot'lar

Bileşenin kabul ettiği değerler.

Prop	Varsayılan	Açıklama
`variant`	`primary`	Dolu: primary · success · danger · warning · info · secondary · dark · light — outline-* ve soft-* aynı renklerle (outline = outline-primary, soft = soft-primary; gray = secondary) — nötr: white · ghost · link
`shadow`	`false`	Dolu butonların altında kendi renginde gölge; üzerine gelince kalkar
`size`	`md`	sm · md · lg · icon
`href`	`null`	Verilirse <a> çizer
`external`	`false`	href ile: yeni sekmede açar (target="_blank" rel="noopener"), ok ikonu ve ekran okuyucu notu ekler
`type`	`button`	button · submit · reset
`disabled`	`false`	Butonu pasifleştirir; href ile aria-disabled ve tabindex="-1" verir
`loading`	`false`	Dönen ikon ve aria-busy="true"; pasifleştirmez
`appearance`	`null`	Form modal uyumu: outline (variant'ı outline-* yapar) · text (ghost); yeni kodda variant kullanın
`(öznitelikler)`	—	class ve diğer öznitelikler butona eklenir; class içindeki görünüm sınıfı (hidden, block, flex …) varsayılan inline-flex'in yerini alır

Slot'lar: varsayılan (buton yazısı ve ikon)