Sadrazam – Button (.bttn) Showcase

Boyut, renk, kademe, durum ve yerlesim varyantlari

Renk Varyantlari

Her renk md boyutunda gosterilmistir

Primary .bttn--pri
Secondary .bttn--sec
Tertiary .bttn--ter
Neutral .bttn--neutral
Ghost .bttn--ghost
Danger .bttn--danger
Safe .bttn--safe
Notice .bttn--notice
Caution .bttn--caution
Warning .bttn--warning

Boyutlar – Kare

Ikon butonlar icin esit padding

LG (14px) .bttn--lg
MD (10px) .bttn--md
SM (7px) .bttn--sm
XS (5px) .bttn--xs

Boyutlar

Rectangle (default) — metin butonlar icin asimetrik padding

LG .bttn--lg
MD .bttn--md
SM .bttn--sm
XS .bttn--xs

Kademe Sistemi

Filled (default) / Soft / Outline — her renk icin 3 kademe

Primary
Secondary
Tertiary
Neutral
Danger
Safe
Warning
Notice
Caution

Custom renk — style="--button-color: ..."

Custom

Aksiyon Hiyerarsisi

Filled > Soft > Outline > Ghost sirasiyla onem azalir

Modal footer
Silme onayi
Form

Loading Durumu

Shimmer efekti + gri perde overlay — tum renklerde

Primary
Secondary
Tertiary
Neutral
Danger
Safe
Ghost
Kare Loading

Block Buton

Tam genislik — .bttn--block

Block + Loading

Boyut Karsilastirma

Tum boyutlar yan yana — Primary renkte

Kare
Rectangle

Koyu Arka Plan Uzerinde

Ghost ve outline butonlarin koyu arka plandaki gorunumu

Ghost
Primary
Loading