Harakat · molecule
Tugma
Amal tugmasi. Variantlar: primary (bölimda bitta), secondary, ghost, danger, link. Faqat ikonka (data-shape="icon" + aria-label), töliq en, bosilgan holat (aria-pressed), yuklaniş (aria-busy — matn joyida qoladi, ustida aylana). Qöşimça: xs/xl ölçam, tonal, outline, danger-ghost/outline variantlari; guruh (fx-btn-group) va split; menyu chevron (fx-btn__chev); ikon almaşinuvi (fx-btn__on/off); matn bilan yuklaniş (data-loading="text"); içki halqa (data-focus="inset"). Holatli tugma (data-state="success|error"): yuklanişdan keyin qisqa ✓ yoki ✕ belgisi (data-state-label bilan söz ham), ~1,6 s dan keyin özi asl körinişga qaytadi; xatoda yengil silkiniş.
Variantlar
| Atribut | Qiymatlar | Standart |
|---|---|---|
data-variant | secondaryprimary Bölimda bitta (WDS «Komponentlar»).ghostdanger Qaytarib bölmaydigan amal.link Amal, lekin matn körinişida. Sahifaga ötiş — fx-link.tonal Brend rangining oç foni.outlinedanger-ghost Jadval içidagi «Öçiriş».danger-outline | secondary |
data-size | xssmmdlgxl | md |
data-shape | texticon aria-label şart. | text |
data-width | autofull | auto |
data-loading | spinner Matn yaşirinadi.text Matn qoladi, aylana oldida. | spinner |
data-focus | outsideinset Qirqiladigan konteyner/guruh içida. | outside |
data-orientation | horizontalvertical | horizontal |
data-state | idlesuccess ✓, ~1,6 s dan keyin qaytadierror ✕ + silkiniş | idle |
Anatomiya
- root
.fx-btnşart - group
.fx-btn-groupixtiyoriy - chevron
.fx-btn__chevixtiyoriy - icon-on
.fx-btn__onixtiyoriy - icon-off
.fx-btn__offixtiyoriy
Holatlar
Klaviatura va kiriş
| Tugma | Amal |
|---|---|
| Enter, Space | Bosiladi |
Faqat ikonka bölsa — aria-label majburiy.
Naqş: WAI-ARIA APG button · rol button
Kod
AI uçun: qaçon işlatiladi
- Amalni bajariş: saqlaş, yuboriş, öçiriş, oynani oçiş.
- Boşqa sahifaga ötiş →
link - Bir neçta holatdan birini tanlaş →
tabs - Bir bölimda ikkita primary tugma qöymang.
- Faqat ikonkali tugmani aria-label'siz qoldirmang.
- Yuklanayotganda tugma matnini «...» ga almaştirmang — aria-busy qöying.
- Guruhdagi tugmalar orasiga qölda oraliq qöymang — fx-btn-group çegarani birlaştiradi.
- Natija holatini faqat rang bilan bildirmang va doimiy qoldirmang — data-state qisqa tasdiq; xato sababi forma yonida yozilsin.
npx foxui add button
<button class="fx-btn" data-variant="primary">Saqlaş</button> <button class="fx-btn">Bekor qiliş</button> <button class="fx-btn" data-variant="ghost" data-size="sm">Yana</button> <button class="fx-btn" data-variant="danger">Öçiriş</button> <button class="fx-btn" data-variant="link">Barçasini köriş</button> <button class="fx-btn" data-variant="primary" aria-busy="true">Yuborilmoqda</button> <button class="fx-btn" data-shape="icon" aria-label="Qidiriş">⌕</button> <button class="fx-btn" aria-pressed="true">Sevimli</button> <div class="fx-btn-group"><button class="fx-btn" aria-pressed="true">Kun</button><button class="fx-btn">Hafta</button><button class="fx-btn">Oy</button></div> <div class="fx-btn-group" role="group" aria-label="Saqlaş"><button class="fx-btn" data-variant="primary">Saqlaş</button><button class="fx-btn" data-variant="primary" data-shape="icon" aria-label="Boşqa variantlar" aria-haspopup="menu" aria-expanded="false"><svg class="fx-btn__chev" viewBox="0 0 16 16" aria-hidden="true"><path d="M4 6l4 4 4-4" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg></button></div> <button class="fx-btn" data-variant="tonal">Tonal</button> <button class="fx-btn" data-variant="outline" data-size="xs">Outline</button> <button class="fx-btn" data-variant="danger-ghost" data-size="sm">Öçiriş</button> <button class="fx-btn" data-variant="primary" aria-busy="true" data-loading="text">Saqlanmoqda…</button> <a class="fx-btn" href="#" aria-disabled="true" tabindex="-1">Havola-tugma</a> <button class="fx-btn" data-variant="primary" data-state="success" data-state-label="Saqlandi">Saqlaş</button> <button class="fx-btn" data-state="error" data-state-label="Yuborilmadi">Yuboriş</button>
Tokenlar: --fx-bg-brand-solid --fx-bg-brand-solid-active --fx-bg-brand-solid-hover --fx-bg-brand-subtle --fx-bg-brand-subtle-active --fx-bg-brand-subtle-hover --fx-bg-error-solid --fx-bg-error-solid-active --fx-bg-error-solid-hover --fx-bg-error-subtle --fx-bg-error-subtle-active --fx-bg-muted --fx-bg-muted-hover --fx-bg-pressed --fx-bg-success-subtle --fx-bg-surface --fx-border-color-focus --fx-border-color-strong --fx-border-width-default --fx-border-width-focus --fx-control-h-lg --fx-control-h-md --fx-control-h-sm --fx-duration-pulse --fx-duration-spin --fx-ease-spring --fx-ease-standard --fx-fg-error --fx-fg-success --fx-font-size-lg --fx-font-size-md --fx-font-size-sm --fx-font-size-xs --fx-font-weight-medium --fx-font-weight-semibold --fx-knob-field-fill --fx-knob-motion-lift --fx-knob-outline --fx-knob-pill --fx-motion-base --fx-motion-fast --fx-motion-instant --fx-motion-press --fx-motion-scale-enter --fx-motion-shift-sm --fx-motion-slow --fx-radius-circle --fx-radius-control --fx-size-icon-md --fx-size-icon-sm --fx-size-min-target --fx-space-1 --fx-space-2 --fx-space-3 --fx-space-4 --fx-space-5 --fx-space-6 --fx-text-brand --fx-text-disabled --fx-text-on-brand --fx-text-on-error --fx-text-primary