Gombok

A gombok a HR portálon a felhasználói interakciók elsődleges elemei, amelyek cselekvéseket indítanak el vagy navigációt biztosítanak.

Elsődleges gombok

Az elsődleges gombok kiemelt funkciókhoz használhatók, mint például űrlap beküldés, megerősítés vagy fő műveletek. A HR Portálon ezeket az Audi HR zöld (#f50537) szín jelöli.

Alapállapotok

Alapállapot

Letiltott állapot

Aktív/Fókuszált állapot

Kódpélda

<UButton color="audi-red" class="py-2 px-6 rounded-[4px]">Mentés</UButton>

<UButton color="audi-red" class="py-2 px-6 rounded-[4px] opacity-50 cursor-not-allowed" disabled>Mentés</UButton>

Méretvariációk

Kicsi (sm)

Közepes (md - alapértelmezett)

Nagy (lg)

Kódpélda

<!-- Kicsi -->
<UButton color="audi-red" size="sm" class="py-1 px-3 text-xs rounded-[4px]">Kicsi</UButton>

<!-- Közepes (alapértelmezett) -->
<UButton color="audi-red" size="md" class="py-2 px-6 rounded-[4px]">Közepes</UButton>

<!-- Nagy -->
<UButton color="audi-red" size="lg" class="py-3 px-8 rounded-[4px] text-lg">Nagy</UButton>

Ikonnal ellátott gombok

Ikon balra

Ikon jobbra

Csak ikon

Kódpélda

<!-- Ikon balra -->
<UButton color="audi-red" class="py-2 px-6 rounded-[4px] flex items-center"><i class="fa-solid fa-save mr-2"></i>Mentés</UButton>

<!-- Ikon jobbra -->
<UButton color="audi-red" class="py-2 px-6 rounded-[4px] flex items-center">Tovább<i class="fa-solid fa-arrow-right ml-2"></i></UButton>

<!-- Csak ikon -->
<UButton color="audi-red" class="p-2 rounded-[4px] flex items-center justify-center w-10 h-10"><i class="fa-solid fa-plus"></i></UButton>

Másodlagos gombok

A másodlagos gombok alternatív vagy kevésbé kiemelt műveletekhez használhatók, mint például mégse, vissza vagy opcionális funkciók.

Alapállapotok

Alapállapot

Letiltott állapot

Aktív állapot

Fókuszált állapot

Kódpélda

<UButton color="gray" variant="outline" class="py-2 px-6 rounded-[4px]">Mégse</UButton>

<UButton color="gray" variant="outline" class="py-2 px-6 rounded-[4px] opacity-50 cursor-not-allowed" disabled>Mégse</UButton>

Szöveges gombok

A szöveges gombok a legkevésbé kiemelt műveleteknél használhatók, mint például opcionális lépések vagy kiegészítő funkciók.

Alapállapotok

Alapállapot

Letiltott állapot

Aktív állapot

Fókuszált állapot

Kódpélda

<UButton color="audi-red" variant="link" class="py-2 px-4">Részletek</UButton>

<UButton color="audi-red" variant="link" class="py-2 px-4 opacity-50 cursor-not-allowed" disabled>Részletek</UButton>

Ikonnal ellátott szöveges gombok

Ikon balra

Ikon jobbra

Kódpélda

<UButton color="audi-red" variant="link" class="py-2 px-4 flex items-center"><i class="fa-solid fa-info-circle mr-2"></i>Segítség</UButton>

<UButton color="audi-red" variant="link" class="py-2 px-4 flex items-center">Összes megtekintése<i class="fa-solid fa-arrow-right ml-2"></i></UButton>

Használati irányelvek

Az alábbi irányelvek segítenek a gombok megfelelő használatában a HR portálon.

Mikor használjunk elsődleges gombot?

A fő művelethez egy oldalon vagy űrlapon (pl. "Mentés", "Küldés", "Jóváhagyás")
Pozitív, előrevivő műveletekhez (pl. "Folytatás", "Következő lépés")
Oldalanként csak egy elsődleges gomb használata javasolt a figyelemirányítás érdekében

Mikor használjunk másodlagos gombot?

Alternatív műveletekhez (pl. "Mégse", "Vissza")
Kevésbé fontos vagy opcionális műveletekhez
Az elsődleges gomb mellé helyezve, vizuális hierarchiát teremtve

Mikor használjunk szöveges gombot?

Kiegészítő információkhoz való hozzáféréshez (pl. "Részletek", "Segítség")
Linkszerű műveletekhez, amelyek nem elsődleges jelentőségűek
Tömöríteni kívánt felületeken, ahol kevesebb vizuális súly szükséges

Gombcsoportok elrendezése

Helyes használat

✓ Az elsődleges gomb jobb oldalon, a másodlagos bal oldalon

Kerülendő használat

✗ Ne helyezze az elsődleges gombot a másodlagos bal oldalára

Akadálymentességi szempontok

A szöveges feliratnak egyértelműen jeleznie kell a gomb funkcióját
A csak ikonnal ellátott gomboknál mindig adjunk meg 'aria-label' attribútumot
A fókuszállapotnak jól láthatónak kell lennie a billentyűzetes navigációhoz
A letiltott gombok állapotát az 'aria-disabled="true"' attribútummal is jelölje