Buton

<div class="sc-col">
    @foreach (['solid', 'soft', 'outline', 'ghost', 'plain'] as $variant)
        <div class="sc-row">
            @foreach (['neutral', 'primary', 'success', 'info', 'warning', 'danger', 'purple', 'pink', 'orange', 'yellow', 'teal'] as $tone)
                <armada:button :$variant :$tone>{{ ucfirst($tone) }}</armada:button>
            @endforeach
        </div>
    @endforeach
</div>

<div class="sc-row">
    @foreach (['xs', 'sm', 'md', 'lg', 'xl'] as $size)
        <armada:button :$size variant="solid" tone="primary">{{ strtoupper($size) }}</armada:button>
    @endforeach
</div>

<div class="sc-row">
    <armada:button icon="plus">Yeni</armada:button>
    <armada:button icon-trailing="arrow-right">Devam</armada:button>
    <armada:button icon="download" icon-trailing="chevron-down">İndir</armada:button>
    <armada:button icon="settings" aria-label="Ayarlar" />
    <armada:button variant="ghost" icon="heart" aria-label="Beğen" />
    <armada:button variant="solid" tone="danger" icon="trash-2" aria-label="Sil" />
</div>

<div class="sc-row" x-data="{ busy: false }">
    <armada:button variant="solid" tone="primary" x-bind:data-loading="busy || null" x-on:click="busy = true; setTimeout(() => busy = false, 1500)">Kaydet (tıkla)</armada:button>
    <armada:button loading>Yükleniyor</armada:button>
    <armada:button disabled>Devre dışı</armada:button>
    <armada:button icon="bell" badge="12">Bildirimler</armada:button>
    <armada:button variant="soft" tone="primary" icon="message-circle" badge="3">Mesajlar</armada:button>
</div>

<div class="sc-col">
    <div class="sc-row">
        <armada:button pill>Pill</armada:button>
        <armada:button pill variant="solid" tone="purple" icon="sparkles">Yükselt</armada:button>
        <armada:button href="https://laravel.com" variant="plain" tone="primary" icon-trailing="arrow-up-right">Laravel</armada:button>
    </div>
    <armada:button block variant="solid" tone="primary" size="lg">Tam genişlik</armada:button>
</div>

<div class="sc-row">
    <div class="arm-toggle-group" role="group" style="box-shadow:none">
        <armada:button variant="ghost" icon="align-left" aria-label="Sola hizala" />
        <armada:button variant="ghost" icon="align-center" aria-label="Ortala" />
        <armada:button variant="ghost" icon="align-right" aria-label="Sağa hizala" />
    </div>
    <div class="sc-row" style="gap:0">
        <armada:button variant="solid" tone="primary" style="border-radius:8px 0 0 8px">Birleştir</armada:button>
        <armada:dropdown align="end">
            <x-slot:trigger><armada:button variant="solid" tone="primary" icon="chevron-down" aria-label="Diğer" style="border-radius:0 8px 8px 0;border-left:1px solid rgb(255 255 255 / .25)" /></x-slot:trigger>
            <armada:menu.item>Squash and merge</armada:menu.item>
            <armada:menu.item>Rebase and merge</armada:menu.item>
        </armada:dropdown>
    </div>
</div>